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 = new stdclass;
$user->name = 'Tom';
$user->email = '[email protected]';
$users[] = $user;


$user = new stdclass;
$user->name = 'Scott';
$user->email = '[email protected]';
$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:[email protected]">[email protected]</span>
	</li>
	<li>
		<h3>Scott</h3>
		<a href="mailto:[email protected]">[email protected]</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>