Learning how to use the full range of CSS selectors available in CSS 2.1 properly can actually help you keep your HTML a lot cleaner. It will let you minimise unnecessary use of the class attribute and the need for adding extraneous div and span elements to the markup. Sounds good, right?
I’m going to describe all the selectors later on, so things will definitely get a bit trickier. Before that though, here is an overview of the syntax for all CSS 2.1 selectors.
Overview of CSS 2.1 selector syntax
| Selector type | Pattern | Description |
|---|---|---|
| Universal | * | Matches any element. |
| Type | E | Matches any E element. |
| Class | .info | Matches any element whose class attribute contains the value info. |
| ID | #footer | Matches any element with an id equal to footer. |
| Descendant | E F | Matches any F element that is a descendant of an E element. |
| Child | E > F | Matches any F element that is a child of an E element. |
| Adjacent | E + F | Matches any F element immediately preceded by a sibling element E. |
| Attribute | E[att] | Matches any E element that has an att attribute, regardless of its value. |
| Attribute | E[att=val] | Matches any E element whose att attribute value is exactly equal to val. |
| Attribute | E[att~=val] | Matches any E element whose att attribute value is a list of space-separated values, one of which is exactly equal to val. |
| Attribute | E[att|=val] | Matches any E element whose att attribute has a hyphen-separated list of values beginning with val. |
| The :first-child pseudo-class | E:first-child | Matches element E when E is the first child of its parent. |
| The link pseudo-classes | E:link E:visited |
Matches not yet visited (:link) or already visited (:visited) links. |
| The dynamic pseudo-classes | E:active E:hover E:focus |
Matches E during certain user actions. |
| The :language pseudo-class | E:lang(c) | Matches elements of type E that are in language c. |
| The :first-line pseudo-element | E:first-line | Matches the contents of the first formatted line of element E. |
| The :first-letter pseudo-element | E:first-letter | Matches the first letter of element E. |
| The :before and :after pseudo-elements | E:before E:after |
Used to insert generated content before or after an element’s content. |
The universal selector
The universal selector is represented by an asterisk, “*”, and matches all elements in the document.
One use of the universal selector that has become quite popular is using it to set the margins and paddings of all elements to zero:
* { margin:0; padding:0; }
This is sometimes referred to as the Global White Space Reset.
Type selectors
A type selector matches every instance of a particular element type. The following rule matches all paragraph elements in the document and sets their font size to 2em:
p { font-size:2em; }
The class selector
The class selector is represented by a full-stop, “.”, and targets elements based on the value of their class attribute.
This rule will match all elements with a class name of “info”, regardless of their type:
.info { background:#ff0; }
The following rule will apply to all p elements with a class name of “info”:
p.info { background:#ff0; }
The ID selector
The ID selector is represented by a hash sign, “#”, and targets elements based on their id value. This rule will apply to an element whose id is “info”, regardless of which element type it is:
#info { background:#ff0; }
If you also specify an element type, the rule will only apply to elements of that type:
p#info { background:#ff0; }
It is important to remember that ID selectors have higher specificity than class selectors, and that an id value must be unique within a document. Therefore an ID selector can only apply to a single element in a document.
To be continued…
0 Responses to “CSS 2 selectors”