DEV Community

loading...

CSS Combinators

Jonathan Cohen
I'm a guy that is used to working with my hands in the labor workforce. Last year I decided to start working with my hands in tech.
・1 min read

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>

Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)