CSS Selectors

Each CSS rule has 2 fundamental parts – the selector and the declaration block.
Example: h1 {color: red; background: yellow;} – h1 is the selector, and {…} is the declarations.

A value is either a single keyword or a space-separated list of one or more keywords that was permitted for that property.
Example: p {font: medium Helvetica;}

If you use either an incorrect property or value in a declaration, the whole thing will be ignored.

CSS keywords are separated by spaces except in one instance. In the CSS property font, there is exactly one place where a forward slash (/) can be used to separate two specific keywords.
Example: h2 {font: large/150% sans-serif;}


1. Universal selector

An asterisk (*). This selector matches any element at all.
Example: * {color: red;}


2. Grouping selectors and declarations

h1, h2, h3, h4, h5, h6 {color: gray; background: white; padding: 0.5em; border: 1px solid black; font-family: Charcoal, sans-serif;}


3. Class selectors

.warning {font-style: italic;}
span.warning {font-weight: bold;}

In HTML, it’s possible to have a space-separated list of words in a single class value.
<p class=”urgent warning”>Hello</p>
The order of the words doesn’t actually matter; warning urgent would also suffice.

Say you want all elements with a class of warning to be boldface, those with a class of urgent to be italic, and those elements with both values to have a silver background. This would be written as follows:
.warning {font-weight: bold;}
.urgent {font-style: italic;}
.warning.urgent {background: silver;}

By chaining two class selectors together, you can select only those elements that have both class names, in any order.
If a multiple class selector contains a name that is not in the space-separated list, then the match will fail. Consider the following rule:
p.warning.help {background: red;}
The selector will match only those p elements with a class containing the words warning and help. Therefore, it will not match a p element with just the words warning and urgent in its class attribute. It would, however, match the following:
<p class=”urgent warning help”>Help me!</p>

Note: class and ID are case-sensitive in HTML.


4. ID selectors:

#first-para {font-weight: bold;}
This rule applies boldface text to any element whose id attribute has a value of frist-para.
Between class selector and ID selector, IDs carry more weight when you’re trying to determine which styles should be applied to a given element.


5. Attribute Selectors:

planet[moons] {font-weight: bold;}
*[title] {font-weight: bold;}
a[href][title] {font-weight: bold;}
planet[moons=”1″] {font-weight: bold;}
a[href=”http://www.w3.org/”][title=”W3C Home”] {font-size: 200%;}

ID selectors and attribute selectors that target the id attribute are not precisely the same. In other words, there is a subtle but crucial difference between h1#page-title and h1[id=”page-title”]. The Specificity is different. ID selectors have a higher specificity (more important) than attribute selectors.

  • Selection based on partial attribute values:
    p[class~=”warning”] {font-weight: bold;}
    img[title~=”Figure”] {border: 1px solid gray;}
  • [foo^=”bar”]
    Selects any element with an attribute foo whose value begins with “bar”.
  • [foo$=”bar”]
    Selects any element with an attribute foo whose value ends with “bar”.
  • [foo*=”bar”]
    Selects any element with an attribute foo whose value contains the substring “bar”.
  • The particular attribute selector:
    *[lang|=”en”] {color: white;}
    This rule will select any element whose lang attribute is equal to en or begins with en-. Therefore, the first three elements below markup would be selected, but the last two would not:
    <h1 lang=”en”>Hello!</h1>
    <p lang=”en-us”>Greetings!</p>
    <div lang=”en-au”>G’day!</div>
    <p lang=”fr”>Bonjour!</p>
    <h4 lang=”cy-en”>Jrooana!</h4>
    In general, the form [att|=”val”] can be used for any attribute and its values. Say you have a series of figures in an HTML document, each of which has a filename like figure-1.gif and figure-3.jpg. You can match all of these images using the following selector:
    img[src|=”figure”] {border: 1px solid gray;}


6. Descendant selector (contextual selector)

Style only those em elements that are descended from h1 element

h1 em {color: gray;}
td.sidebar {background: blue;}
td.main {background: white;}
td.sidebar a:link {color: white;}
td.main a:link {color: blue;}
blockquote b, p b {color: gray;}

The child combinator (>):
h1 > strong {color: red;}

Note the difference between descendant and child.

Adjacent-sibling combinator (+) – selects an element that immediately follows another element with the same parent.
To remove the top margin from a paragraph immediately following an H1 element, write:
h1 + p {margin-top: 0;}
In addition, text content between two elements does not prevent the adjacent-sibling combinator from working.
Example: html > body table + ul{margin-top: 1.5em;}
The selector translates as “selects any ul element that immediately follows a sibling table element that is descended from a body element that is itself a child of an html element.”


7. Pseudo-Class Selectors

a:visited {color: red;}

Refers to any anchor that is a hyperlink (i.e., has an href attribute) and points to an address that has not been visited.

Refers to any anchor that is a hyperlink to an already visited address.

The :link and :visited pseudo-class selectors are functionally equivalent to the body attributes link and vlink.
<body link=”purple” vlink=”silver”>

a#footer-copyright:link{font-weight: bold;}
a#footer-copyright:visited {font-weight: normal;}

Dynamic pseudo-classes

Refers to any element that currently has the input focus i.e., can accept keyboard input or be activated in some way.

Refers to any element over which the mouse pointer is placede.g., a hyperlink over which the mouse pointer is hovering.

Refers to any element that has been activated by user inpute.g., a hyperlink on which a user clicks during the time the mouse button is held down.

a:link {color: navy;}
a:visited {color: gray;}
a:hover {color: red;}
a:active {color: yellow;}

Note that the dynamic pseudo-classes can be applied to any element, which is good since it’s often useful to apply dynamic styles to elements that aren’t links.

The order of the pseudo-classes is more important than it might seem at first. Recommendation is “link-visited-focus-hover-active.”

:first-child – used to select elements that are the first children of other elements.
Consider the following markup:

<p>These are the necessary steps:</p>
<li>Insert key</li>
<li>Turn key <strong>clockwise</strong></li>
<li>Push accelerator</li>
Do <em>not</em> push the brake at the same time as the accelerator.

In this example, the elements that are first children are the first p, the first li, and the strong and em elements. Given the following two rules:
p:first-child {font-weight: bold;} – bolds the p that is a first-child; so “These are the necessary steps” will be bolded.
li:first-child {text-transform: uppercase;} – Set the <li> that is a first-child to upper case; so “Insert key” becomes “INSERT KEY”

For situations where you want to select an element based on its language, you can use the :lang( ) pseudo-class. In terms of its matching patterns, the :lang( ) pseudo-class is exactly like the |= attribute selector. For example, to italicize any element in French, you would write:
*:lang(fr) {font-style: italic;}
The primary difference between the pseudo-selector and the attribute selector is that the language information can be derived from a number of sources, some of which are outside the element itself.

Combine Pseudo-classes
a:link:hover {color: red;}
a:visited:hover {color: maroon;}

8. Pseudo-Element Selectors:

p:first-line {color: purple;}
p:first-letter {color: red;}

In addition, all pseudo-elements must be placed at the very end of the selector in which they appear. Therefore, it would not be legal to write p:first-line em since the pseudo-element comes before the subject of the selector (the subject is the last element listed).

h2:before {content: “]]”; color: silver;} – preface every <h2> with “]]”
body:after {content: ” The End.”;}
– end your document with “The End”

By Bryan Xu