Basic Usage: CSS Selectors

CSS Selectors

Transphporm uses CSS selectors to target elements. TSS currently supports the following selectors:

.classname

$xml = '	<main> <p>Paragraph one</p> <p class="middle">Paragraph two</p> <p>Paragraph 3</p>	</main>';
$tss = '.middle {content: "Middle paragraph"; }';
$template = new \Transphporm\Builder($xml, $tss);
echo$template->output()->body;

Output:

	<main>
<p>Paragraph one</p>
<p class="middle">Middle Paragraph</p>
<p>Paragraph 3</p>
</main>

tagname.classname

$xml = '	<main> <p>Paragraph one</p> <p class="middle">Paragraph two</p> <p>Paragraph 3</p> <a class="middle">A link</a>	</main>';
$tss = 'p.middle {content: "Middle paragraph"; }';
$template = new \Transphporm\Builder($xml, $tss);
echo$template->output()->body;

Output:

	<main>
<p>Paragraph one</p>
<p class="middle">Middle Paragraph</p>
<p>Paragraph 3</p>
<a class="middle">A link</a>
</main>

Direct descendent foo > bar

$xml = '	<ul> <li>One</li> <li>Two <span>Test</span> </li> <li>Three <div> <span>Test 2 </span> </div> </li>	</ul>';
$tss = 'li > span {content: "REPLACED";}';
$template = new \Transphporm\Builder($xml, $tss);
echo$template->output()->body;

Output:

<ul><li>One</li><li>Two
<span>REPLACED</span></li><li>Three
<div><span>Test 2 </span></div></li></ul>

ID selector #name

$xml = '	<main> <p>Paragraph one</p> <p id="middle">Paragraph two</p> <p>Paragraph 3</p>	</main>';
$tss = '#middle {content: "Middle paragraph"; }';
$template = new \Transphporm\Builder($xml, $tss)
echo $template->output()->body;

Output:

	<main>
<p>Paragraph one</p>
<p id="middle">Middle Paragraph</p>
<p>Paragraph 3</p>
</main>

Attribute selector

Like CSS, you can select elements that have a specific attribute:

$xml = '	<textarea name="One">	</textarea>	<textarea name="Two">	</textarea>	<textarea>	</textarea>';
$tss = 'textarea[name="Two"] {content: "TEST"; }';
$template = new \Transphporm\Builder($xml, $tss);
echo$template->output()->body;

Output:

	<textarea name="One">
</textarea>
<textarea name="Two">
TEST
</textarea>
<textarea>
</textarea>

Or, any element that has a specific attribute:

$xml = '	<textarea name="One">	</textarea>	<textarea name="Two">	</textarea>	<textarea>	</textarea>';
$tss = 'textarea[name] {content: "TEST"; }';
$template = new \Transphporm\Builder($xml, $tss);
echo$template->output()->body;

Output:

	<textarea name="One">
TEST
</textarea>
<textarea name="Two">
TEST
</textarea>
<textarea>
</textarea>

Combining selectors

Like CSS, all the selectors can be combined into a more complex expression:

table tr.list td[colspan="2"] {}

Will match any td with a colspan of 2 that is in a tr with a class list and inside a table element

Unsupported selectors

Currently the CSS selectors ~ and + are not supported.