Selecta
Write HTML strings using CSS selectors
Install / Use
/learn @drewm/SelectaREADME
Selecta: super-light casual templating using CSS selectors
Use a CSS selector to wrap your content with HTML tags.
echo Selecta::wrap('h1.welcome', 'Hello, world');
will output:
<h1 class="welcome">Hello, world</h1>
Why?
Sometimes you need to output a quick bit of HTML at a point where it's really inconvenient to use a full template. Creating strings of HTML in your code is horrible, so this something a bit more humane.
Usage
Currently supports IDs, classes and attribute selectors.
Class names
echo Selecta::wrap('ul.list li', 'So listy');
will output:
<ul class="list"><li>So listy</li></ul>
IDs
echo Selecta::wrap('div#contact', 'Call me');
will output:
<div id="contact">Call me</div>
Attribute and Pseudo-class selectors
echo Selecta::build('input[type=radio][name=color][value=blue]:checked');
will output:
<input type="radio" name="color" value="blue" checked>
Currently supports :checked and :disabled pseudo-classes.
Mix it up
All these can be combined and stacked:
echo Selecta::build('form#contact div.field input[type=text][required]');
will output (indented for clarity):
<form id="contact">
<div class="field">
<input type="text" required>
</div>
</form>
Methods
The following methods are available:
Selecta::wrap(selector, contents) will wrap the contents with the tags created by the selector.
Selecta::open(selector) will open the tags created by the selector.
Selecta::close(selector) will close the tags created by the selector. Note that the order of tags is reversed - you can use the same selector string with open() and close() to get valid tag pairs.
Selecta::build(selector, contents, open, close) will do everything - build the tags, optionally wrap the contents, optionally open and optionally close the tags.
Opening and closing
Don't have a template to hand but need to output some structural markup?
echo Selecta::open('section.sidebar div');
echo $CMS->display_all_my_weird_sidebar_junk();
echo Selecta::close('section div');
Related Skills
node-connect
346.4kDiagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps
frontend-design
107.2kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
openai-whisper-api
346.4kTranscribe audio via OpenAI Audio Transcriptions API (Whisper).
qqbot-media
346.4kQQBot 富媒体收发能力。使用 <qqmedia> 标签,系统根据文件扩展名自动识别类型(图片/语音/视频/文件)。

