Splash of Style...Macs, Photography, Design, and other Passions

CSS Child & Adjacent Sibling Selectors

July 18, 2006 by debbie T | CSS

[This is an advanced CSS tutorial. To learn the basics of XHTML and CSS, please view my Web Design Made Simple tutorials.]

It started out with an email discussion with friends, and worked its way into a detailed experiment to grasp how CSS child and adjacent sibling selectors worked. (Important Note: some advanced selectors do not work in IE version 6 or below.)

### CSS Children

What is a CSS child? It is a direct descendant of an element.

<div>
<p>This is <em>fun</em></p>
</div>

* The p tag is a child of the div tag
* The em is a child of the p element
* The em is a descendant, but not a child of the div tag

### CSS Adjacent Siblings

What is a CSS adjacent sibling? It is an element that follows right after another, as long as they both have the same parent.

<div>
<h1>Heading</h1>
<p>This is fun</p>
<p>This is challenging too</p>
</div>

* The h1 and both p elements are children of the div element.
* The h1 and both paragraphs are siblings, but only the h1 and the first paragraph are adjacent siblings.
* Both paragraphs are adjacent siblings.

Now that we have the definitions out of the way, how do the selectors work?

### CSS Descended Selectors

If you want to define a style for a descendant of an element, you would create a CSS rule with two selectors separated by a space.

div em {color:blue;}

The above CSS code would display all em text as blue as long as it was nested somewhere inside a div element.

### CSS Child Selectors

If you only wanted to define a child, then the greater than special character is used.

div>em {color:blue;}

The above CSS rule would format em text only if it was located directly in the div element. Any em text nested in a paragraph or heading would not display blue.

### CSS Adjacent Selectors

To define a CSS adjacent selector, the plus sign is used.

h1+p {color:blue;}

The above CSS code will format the first paragraph after any h1 headings as blue.

h1+p+p {color:blue;}

The above CSS code will format the second paragraph after any h1 headings as blue.

### Experiment

The best way to understand CSS is to experiment with it; if you are intimidated to experiment with your own file at first, but if you would like to see an example, I am sharing my child.html file. View source to see the embedded CSS and detailed notes.

Have fun!

There are 12 comments

  1. Nice Going Debbie. You explained it all in nice easy to understand terminology. This is a hard concept to grasp, and I find some times that books are just to technical to get what they have to say across.

    Glad you enjoyed the email conversation. :)

    Comment by Miss B on July 18th, 2006
  2. Hard to grasp is putting it mildly!

    I always avoided these advanced selectors because I never wanted to take the time to learn them! You guys made me see the light!

    Comment by debbieT on July 18th, 2006
  3. This is an excellent explanation of children and descendants, dT! Very concise and an excellent resource.

    Comment by Lisa on July 18th, 2006
  4. Hi, I never fill these things out…but this made perfect sense of simple matter which the books made into technical drivel. Thanks tons.

    Comment by Conrad on October 7th, 2006
  5. Very entertaining issue. I haven\’t heard of this one. It will be necessary to visit you on a thicket!

    Comment by История Египта on March 18th, 2007
  6. Thanks Dear…. I was actually confused between child selector and Descendant selector for many days…Thanks for solving the confusion…

    Comment by Pravin Varma on April 20th, 2009
  7. These really helped me to build my homepage, I can really appreciated if people take some time and write a usefull tutorial.

    Comment by gratis webseite erstellen on April 7th, 2010
  8. awesome!!!

    this is what i was looking for!!!

    thanks!!!

    Comment by arfa on May 22nd, 2010
  9. Thnkx friend, Very useful trick i use this trick as for ID its works,

    I use same ID on 3 objects and i want to style the last 3rd object with this same ID .. this css trick is work.

    #myID+#myID+#myID{
    color:blue;
    }

    Comment by Abdullah on August 6th, 2010
  10. but the bad thing is iiiIIIITTTTTTssssss not working on ie6 browser.

    Comment by Abdullah on August 6th, 2010
  11. What is the proper syntax to target just the first li a in a multiple nested list? Below is an example.

    First li anchor text

    Second li anchor text

    Thrid li anchor text

    Say I want to target the anchor in 1st_li_of_main?

    Say I want to target the anchor in 1st_li_of_second?

    Comment by Extreme of Tregonia on June 27th, 2011
  12. Looks like the structure did not post; let’s try this with a pre element

    First li anchor text

    Second li anchor text

    Thrid li anchor text

    Comment by Extreme of Tregonia on June 27th, 2011