HTML Attributes

Writing to Attributes

Unlike CSS, Transphporm selectors allow direct selection of individual attributes to set their value. This is done using the pseudo element :attr(name) which selects the attribute on the matched elements.

element:attr(id)

Will select the element's ID attribute.

Working example:

$users = [];
$user = newstdclass;
$user->name = 'Tom';
$user->email = 'tom@example.org';
$users[] = $user;
$user = newstdclass;
$user->name = 'Scott';
$user->email = 'scott@example.org';
$users[] = $user;
$xml = '<ul>	<li> <h3>Name</h3> <a href="mailto:email">email</a>	</li>	</ul>';
$tss = '	ul li {repeat: data(users);}	ul li a {content: iteration(email);}	ul li a:attr(href) {content: "mailto:", iteration(email);}';
$data = ['users' => $users];
$template = new \Transphporm\Builder($xml, $tss);
echo$template->output($data)->body;

Notice this uses multiple values for the content property to concatenate the full URL with mailto.

Output:

<ul>
<li>
<h3>Tom</h3>
<a href="mailto:Tom@example.org">Tom@example.org</span>
</li>
<li>
<h3>Scott</h3>
<a href="mailto:scott@example.org">scott@example.org</span>
</li> </ul>

Reading from attributes

It's also possible to read from attributes using attr(name) inside the content property.

$xml = '<h1 class="foo">bar</h1>';
$tss = 'h1 {content: attr(class);}';
$template = new \Transphporm\Builder($xml, $tss);
echo$template->output()->body;

Output:

<h1 class="foo">foo</h1>