Search:
Tip: Please give your vote in at least one Picks Poll to enable search results. Thank you.
Search for phrase rather than keywords
(e.g. turn on to find exact phrase “Lindsay Lohan leak” rather than pages featuring “Lindsay”, “Lohan”, and “leak” within but not necessarily exact phrase).

CSS selector liberal lotion

26th March 2014

Page: prev. | 1 | next

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:

Line
  1. h1 {color:red;}

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:

Liberal lotion
Descendant and other additional structural selectors can be a real liberal lotion to your CSS markup.
Line
  1. <head>
  2. <style>
  3. footer {border:2px dashed #DB4D94;} /*Bordered to indicate footer element */
  4. footer p {color:red;}
  5. </style>
  6. </head>
  7. <body>
  8. <p>First paragraph.</p>
  9. <footer>
  10.   <p>Second paragraph.</p>
  11.   <div><p>Third paragraph.</p></div>
  12. </footer>
  13. </body>

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.

Descendant selectors

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

Line
  1. #thePageFooter p {color:red;}

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:

Line
  1. <head>
  2. <style>
  3. footer {border:2px dashed #DB4D94;} /*Bordered to indicate footer element */
  4. footer > p {color:red;}
  5. </style>
  6. </head>
  7. <body>
  8. <p>First paragraph.</p>
  9. <footer>
  10.   <p>Second paragraph.</p>
  11.   <div><p>Third paragraph.</p></div>
  12. </footer>
  13. </body>

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.

Child selectors

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

Line
  1. <head>
  2. <style>
  3. footer {border:2px dashed #DB4D94;} /*Bordered to indicate footer element */
  4. footer * p {color:red;}
  5. </style>
  6. </head>
  7. <body>
  8. <p>First paragraph.</p>
  9. <footer>
  10.   <p>Second paragraph.</p>
  11.   <div><p>Third paragraph.</p></div>
  12. </footer>
  13. </body>

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

Grandchild selectors

Adjacent sibling selectors

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

Line
  1. <head>
  2. <style>
  3. h1 {border:2px dashed #DB4D94;}/*Bordered to indicate element */
  4. h1 + p {color:red;}
  5. </style>
  6. </head>
  7. <body>
  8. <p>First paragraph.</p>
  9. <h1>Heading</h1>
  10. <p>Second paragraph.</p>
  11. <p>Third paragraph.</p>
  12. </body>

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.

Adjacent sibling selectors

Attribute selectors

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

Line
  1. <head>
  2. <style>
  3. p[title] {color:red;}
  4. </style>
  5. </head>
  6. <body>
  7. <p title="highlight">First paragraph.</p>
  8. <p>Second paragraph.</p>
  9. <p>Third paragraph.</p>
  10. </body>

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.

Attribute selectors, title attribute

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

Line
  1. <head>
  2. <style>
  3. p[class=highlight] {color:red;}
  4. </style>
  5. </head>
  6. <body>
  7. <p>First paragraph.</p>
  8. <p class="highlight">Second paragraph.</p>
  9. <p>Third paragraph.</p>
  10. </body>

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.

Attribute selectors, class with value attribute

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

Line
  1. <head>
  2. <style>
  3. p[title=highlight][class=highlight] {color:red;}
  4. </style>
  5. </head>
  6. <body>
  7. <p title="highlight">First paragraph.</p>
  8. <p title="highlight" class="highlight">Second paragraph.</p>
  9. <p title="highlight">Third paragraph.</p>
  10. </body>

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.

Attribute selectors, title and class with value attributes

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).


Page: prev. | 1 | next

Tags: CSS, HTML.