Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Asia Chan
Asia Chan
11,007 Points

Why use ``.col + .col {}`` instead of ``.col {}``? What's the difference?

Why use .col + .col {} instead of just .col {}? What's the difference?

3 Answers

Kevin Korte
Kevin Korte
28,149 Points

Well, it would depend on what you're going for. .col + .col {} would select a .col element that would be adjacent to another .col where only .col {} would select all elements with that class.

Take this for example: http://codepen.io/kevink/pen/egoexp

You can see that the adjacent selector doesn't select the first list item, cause it's not adjacent to another one, but it does select the others, while just .col {} applies to all of them.

Asia Chan
Asia Chan
11,007 Points

Oh. So basically, "+" sign is for elements that are adjacent to each other? Okay thank you!

Marina Shumeyko
Marina Shumeyko
5,647 Points
Marina Shumeyko
Marina Shumeyko
5,647 Points

Select and style every <div class ="col"> element that are placed immediately after <div class="col"> element:

<div class="col"> 
  text1
  <div class="col">text2</div>
</div>

.col {
color: red;
}

.col + .col {
color: blue;
}

! text1 would be color red, but text2 would be blue.

so when you type like div + p it means that only p elements who are direcly children of this div element

Asia Chan
Asia Chan
11,007 Points

So it's a way to override all .col css declarations?

Jacob Mishkin
Jacob Mishkin
23,118 Points

the + operator in CSS is referred to as an adjacent selector. It will select only the element that is immediately preceded by the former element. Marina Shumeyko answer is correct. I think using two classes with the same name is not the best example to start using this type of operator.

here is another example: 

<div id="container">
      <ul>
         <li> List Item </li>
         <li> List Item </li>
         <li> List Item </li>
         <li> List Item </li>
      </ul>
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. </p>
   </div>

and the CSS: 

ul + p {
   color: red;
}

Only the P tag will be red.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Marina,

For your example to work out, the 2 div's need to be siblings to each other.

The + sign is the adjacent sibling combinator.

Asia Chan
Asia Chan
11,007 Points
Asia Chan
Asia Chan
11,007 Points

Thanks everyone for the responses!