Grouping selectors

Grouping selectors – how to handle multiple selector at once

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).