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 SAMUEL LAWRENCE
SAMUEL LAWRENCE
Courses Plus Student 8,447 Points

using + to target elements in an html file in css

Hi guys I'm doing the JavaScript and the DOM course now and in the Thinking Globally lesson, I looked at the CSS file in the workspace and noticed to select some elements in the html file they used for example;

video link: https://teamtreehouse.com/library/thinking-globally

h1 + p {
  font-size: 1.08em;
  color: #637a91;
  margin-top: .5em;
  margin-bottom: 2.65em;
  padding-bottom: 1.325em;
  border-bottom: 1px dotted;
}

I've never seen this style before. Can someone break it down for me? for example I saw 

button + button {
  margin-left: .5em;
}

the both selectors are exactly the same name. So what's going on here? And if there is a link to a video where this was explained can someone point me to it?

Thanks

1 Answer

andren
andren
28,558 Points
andren
andren
28,558 Points

That is an example of an adjacent sibling combinator. Combinators and other advances selectors like that are talked about and demonstrated in the CSS Selectors course.

The adjacent sibling combinator is used to select a direct sibling element. Let's say you have HTML that looks like this:

<div>
  <h1>Here are two buttons:</h1>
  <button>Button1</button>
  <button>Button2</button>
</div>

The h1 and two button elements are considered to be sibling elements since they all have the same parent div element.

Let's say you wanted the second button (but not the first) to have blue text. Other than adding a class/id to the button how would go about doing that? Well the answer is with an adjacent sibling combinator like this:

button + button {
  color: blue;
}

That selector tells CSS to look for a button that is a direct sibling of (right next to) another button, and to apply the style to that button specifically.