In an embedded or linked style sheet, a selector is the markup you are altering the appearance of. There are several different selection methods, the simplest of which are shown below:
| Name | Example | Use |
|---|---|---|
| Universal or “wildcard” selector | | For selecting every element in a document (or site-wide, if used in a linked style sheet). Commonly used for CSS resets to set all elements to the same default properties. |
| Single selector | | To select a single tag. |
| Grouped selectors | | To have multiple elements share the same style rule(s). |
| Descendant selector | | Applies the style declaration that applies only to the last element if it is a descendant of the selector sequence. For the example shown, list items will be bold, but only if they are in the context of (i.e. descend from) a unordered list element. (list items elements in ordered lists will be unaffected) |
| Sibling selector | | Selects all matching elements that follow at the level of the leading element |
| Adjacent selector | | Selects the element if it comes immediately after the one before it. In the example shown, the first paragraph immediately after an h2 element will be italicized. Other paragraphs outside of this context will be unaffected.
|
| id selector | | Selects elements that have an id that matches the word following the pound sign. Note that this id must be unique to the page. (The same id can be used on multiple pages, but only once per page).
|
| Class selector | | Selects elements that have a class attribute with a value matching the word following the period in the selector. Classes may be used multiple times on a page, but should not be the majority of content associated with that element.
|
| Attribute value selector | | Applies only to tags in which an attribute has a particular value. |
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
