CSS 2.1 Selectors
CSS instructions written in an external stylesheet take the following form:
css selector{css property:property value;}
For example: p{margin-left: 10%;} would give all paragraph elements a left margin of 10%.
The selector is the part of the declaration which tells the browser which element the style rule applies to and in CSS 2.1 selectors can be written in the following ways(the letter e has been used to represent the type of element):
| selector | meaning |
|---|---|
| * | Universal selector - applies to every element. |
| e | Matches all elements of the specified type 'e'. |
| e, f, g | Matches all elements of the specified type 'e' and all 'f' elements and all 'g' elements. A comma separated list of as many elements as you like. |
| e.classname | Class selector - matches 'e' elements of the specified class. |
| .classname | Class selector - matches any elements of the specified class. |
| e#idname | Id selector - matches 'e' elements of the specified id. |
| #idname | Id selector - matches any elements of the specified id. |
| e f | Matches any 'f' element that is a descendant of 'e' elements. |
| e + f | Matches any 'f' element immiediately preceeded by an 'e' element when they are siblings(they both share the same parent element). |
| e > f | Matches any 'f' element that is a child of an 'e' element. |
| e:first-child | Matches any element that is the first child of the 'e' element. |
| e:link | Matches any 'e' elements when they are the source anchor of a hyperlink which hasn't been visited (clicked on). |
| e:visited | Matches any 'e' element which is the source anchor of a hyperlink which has been visited(clicked on). |
| e:active | Dynamic selector which matches the source anchor of a hyperlink in the specified 'e' element which has just been activated(clicked on). |
| e:hover | Dynamic selector which applies to a source anchor of a hyperlink in the specified 'e' element as the user 'hovers' over the link with a mouse. |
| e:focus | Dynamic selector which applies to a source anchor of a hyperlink in the specified 'e' element when it has focus. |
| e:lang(c) | Matches any 'e' element of language 'c' - human language not computer language. |
| e[attribute] | Attribute selector which matches any 'e' element with the attribute specified in the brackets set. |
| e[attribute="value"] | Attribute selector which matches any 'e' element where the attribute contained in the brackets has exactly the value given in quotes. |
| e[attribute~="value"] | Attribute selector which applies to all 'e' elements where the specified attribute contains the quoted value. |
To enable greater accuracy in element selection you can string selectors together using whitespace, "+"(for siblings) or ">"(for child elements). You can also add a pseudo element at the end of the last selector in the string. Here are some examples of selectors using more than one simple selector:
p.normal em- matches all<em>elements within<p>elements of the class 'normal'.input#email:focus- matches an<input>element with an id of 'email' when it has focus.h2[class="subheading"] [title="explanation"]- matches<h2>elements which have a class attribute with a value of exactly 'subheading' and a title attribute with a value of exactly 'explanation'.