-
Notifications
You must be signed in to change notification settings - Fork 27
Basic Usage: CSS Selectors
Chris Johnson edited this page Feb 1, 2019
·
3 revisions
Transphporm uses CSS selectors to target elements. TSS currently supports the following selectors:
$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>
$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>
$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>
$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>
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>
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
Currently the CSS selectors ~
and +
are not supported.