Basic Usage: CSS Selectors

Chris Johnson edited this page Jun 29, 2016 · 2 revisions

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

Unsupoorted selectors

Currently the CSS selectors ~ and + are not supported.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.