Grouping selectors
In brief
Remember, when several selectors share the same declarations, they may be grouped together to save writing the same rule more than once. Each selector must be separated by a comma.
Two cases exists to handle group of selector. The quick and limited solution
(accept only two selectors in a same group) with :
HTML_CSS::setSameStyle()
.
And the extended/common solution with :
HTML_CSS::createGroup()
,
HTML_CSS::setGroupStyle()
,
HTML_CSS::addGroupSelector()
and
HTML_CSS::removeGroupSelector()
.
Create group
HTML_CSS::createGroup()
creates basically
a group for selectors given as first argument. You can identify this group
by an identifier (alphanumeric) or let HTML_CSS manage an internal numeric
identifier itself.
Let creates this group of selectors :
#main p, #main ul { padding-top: 1em; color: red; }
Identify the group yourself
Identifier is named myGroupID in this example:
<?php
require_once 'HTML/CSS.php';
$css = new HTML_CSS();
$g1 = $css->createGroup('#main p, #main ul', 'myGroupID');
$css->setGroupStyle($g1, 'padding-top', '1em');
$css->setGroupStyle($g1, 'color', 'red');
$css->display();
?>
Let HTML_CSS do it itself
This is the default behavior.
<?php
require_once 'HTML/CSS.php';
$css = new HTML_CSS();
$g1 = $css->createGroup('#main p, #main ul');
$css->setGroupStyle($g1, 'padding-top', '1em');
$css->setGroupStyle($g1, 'color', 'red');
$css->display();
?>
Handle group selector
With
HTML_CSS::addGroupSelector()
and
HTML_CSS::removeGroupSelector()
, we have ability to
add or remove one selector from a selectors list (of a group).
Suppose we have these selectors :
html, body { margin: 2px; padding: 0; border: 0; }
and we want to apply same share properties to new class 'large' and do not anymore apply it to 'body'.
Here are how to do :
<?php
require_once 'HTML/CSS.php';
$css = new HTML_CSS();
// 1. create the pre-requires data
$g1 = $css->createGroup('html, body');
$css->setGroupStyle($g1, 'margin', '2px');
$css->setGroupStyle($g1, 'padding', '0');
$css->setGroupStyle($g1, 'border', '0');
// 2. remove the body selector
$css->removeGroupSelector(1, 'body');
// 3. add the new 'large' class
$css->addGroupSelector(1, '.large');
$css->display();
?>
Remember that HTML_CSS handle group (numeric) identifier itself (begin at 1, and go to 2, 3, and more).