CSS selector liberal lotion

Selectors are at the heart of CSS (Cascading Style Sheets) for, while CSS can style what use it that without being able to indicate what you want styled?

At the simplest structural level there is not much to say; if you wish to style all level 1 headings in a document the notation is simple to implement a type selector for all h1 elements:

However, there are a variety of additional structural selectors which are woefully underused, which is a pity as they can be a real liberal lotion to your CSS markup.

Descendant selectors

Let’s say you wish to style an element type in a particular manner only if they are within a particular type of element. This can be easily accomplished by specifying a descendant selector. For example, to style text in paragraph element in a particular way only if they are within a footer element:

The footer p syntax in line 4 states that within a footer element all text within a p element will be coloured red while text in paragraph elements outside of the footer element will retain the colour defaultly or explicitly set elsewhere, so here the second and third paragraphs will be red while the colour of the first will be unchanged.

We could if we had wished just as easily used an ID selector for the element instead of a type selector:

Child selectors

Let’s say you wish to style an element type only if it is within another element—a child element of the ancestor element it is within—but not within another child element of a different type:

In this case footer > p in line 4 ensures again the first paragraph will remain unchanged but so will the third, which placed in a div element is a grandchild of the footer element rather than a child.

What if you wished to apply the styling to grandchild elements but not children?

footer * p in line 4 ensures only the third paragraph is now styled.

Adjacent sibling selectors

Let’s say you wish to style an element of a particular type only if it directly follows an element specified:

Here the footer has been removed so no elements are children (well, technically they all are—of the body element, but you get what I mean—and for clarity the third p element has been removed from its div element. h1 + p in line 4 ensures the second paragraph is the only one styled as it is directly below the h1 element.

Attribute selectors

Let’s say you wish to style only if a p element has a title attribute:

In line 3 p[title] ensures the first paragraph is the only one styled, being the only paragraph with a title attribute, its value of no consequence.

Let’s say you wish to style only if a p element if of a particular class:

In line 3 p[class=highlight] ensures the second paragraph is the only one styled, being the only paragraph with a class attribute of the value highlight.

And if you wished to style only if the p element has both title and class attribute with a value of highlight:

In line 3 p[title=highlight][class=highlight] ensures the first paragraph is the only one styled, being the only one with both title and class attribute with a value of highlight.

I hope use of additional structural selectors can be of use for you. For further detailed explanation and even more structural selectors visit the W3C selector writeup (w3.org).

Related entries

• Page jumps with internal links
• HTML5Shiv for HTML5 support for IE < 9
• Center a layout using CSS positioning and negative margin
• Forcing the figcaption element to wrap to the width of image

Tags: CSS, HTML.