CSS Combinators

Last week I wrote about my trials of CSS and what I'm learning. I ended last week's post with talk about CSS combinators. Combinators are ways that allow us to specify what tag we want to manipulate. There are four of them that I'm familiar with and I will talk about one of them this week and the other three in the following weeks.

Descendant Combinator

The first I'll talk about is the descendant combinator. Much like it sounds, this would be a combinator that specifies a tag that 'follows' another tag.

<div class='dr-light'>
   <p>In the year 20XX...</p>
</div>

In this example, the div with a class of 'dr-light' can be considered the parent of the p tag within the pair of opening and closing div tags. To target that particular p tag you would write the css like:

.dr-light p{
   blah: blah-blah;
}

The space between the selectors, as shown with this syntax, targets the p that follows the div with a class of 'dr-light'. With this combinator being the most general of the 4, ANY p tag thats a descendant of that particular div(within the opening and closing tags) would be affected by the css example above.