CODEWITHSUNDEEP
csscss-selectors
gday
gday

Reputation: 8291

What does the "+" (plus sign) CSS selector mean?

For example:

p + p {
  /* Some declarations */
}

I don't know what the + means. What's the difference between this and just defining a style for p without + p?

Upvotes: 814

Views: 391783

Answers (9)

jl_
jl_

Reputation: 5539

The + combinator is called the Adjacent sibling combinator / Next-sibling combinator.

For example, the combination of p + p selectors, selects the p elements immediately following the p elements

It can be thought of as a "looking alongside" combination that checks for the immediately following element.

Here is a sample snippet to make things more clear:

body {
  font-family: Tahoma;
  font-size: 12px;
}
p + p {
  margin-left: 10px;
}
<div>
  <p>Header paragraph</p>
  <p>This is a paragraph</p>
  <p>This is another paragraph</p>
  <p>This is yet another paragraph</p>
  <hr>
  <p>Footer paragraph</p>
</div>

Since we are on the same topic, it is worth mentioning another combinator, ~, which is the General sibling combinator / Subsequent-sibling combinator

For example, p ~ p selects all the p which follows the p doesn't matter where it is, but both p should be having the same parent.

Here is what it looks like with the same markup:

body {
  font-family: Tahoma;
  font-size: 12px;
}
p ~ p {
  margin-left: 10px;
}
<div>
  <p>Header paragraph</p>
  <p>This is a paragraph</p>
  <p>This is another paragraph</p>
  <p>This is yet another paragraph</p>
  <hr>
  <p>Footer paragraph</p>
</div>

Notice that the last p is also matched in this sample.

Upvotes: 39

Nesha Zoric
Nesha Zoric

Reputation: 6620

+ presents one of the relative selectors. Here is a list of all relative selectors:

div p - All <p> elements inside of a <div> element are selected.

div > p - All <p> elements whose direct parent is <div> are selected. It works backwards too (p < div)

div + p - All <p> elements placed immediately after a <div> element are selected.

div ~ p - All <p> elements that are preceded by a <div> element are selected.

Here is some more about selectors.

Upvotes: 24

corn on the cob
corn on the cob

Reputation: 2282

The + selector targets the one element after. On a similar note, the ~ selector targets all the elements after. Here's a diagram, if you're confused:

enter image description here

Upvotes: 38

Cas Bloem
Cas Bloem

Reputation: 5040

The + sign means select an "adjacent sibling"

For example, this style will apply from the second <p>:

p + p {
   font-weight: bold;
} 
<div>
   <p>Paragraph 1</p>
   <p>Paragraph 2</p>
</div>

Example

See this JSFiddle and you will understand it: http://jsfiddle.net/7c05m7tv/ (Another JSFiddle: http://jsfiddle.net/7c05m7tv/70/)

Browser Support

Adjacent sibling selectors are supported in all modern browsers.

Learn more

Upvotes: 68

Thorarin
Thorarin

Reputation: 48476

See adjacent selectors on W3.org.

In this case, the selector means that the style applies only to paragraphs directly following another paragraph.

A plain p selector would apply the style to every paragraph in the page.

This will only work on IE7 or above. In IE6, the style will not be applied to any elements. This also goes for the > combinator, by the way.

See also Microsoft's overview for CSS compatibility in Internet Explorer.

Upvotes: 845

Rajesh Prasad Yadav
Rajesh Prasad Yadav

Reputation: 908

p+p{
//styling the code
}

p+p{
} simply mean find all the adjacent/sibling paragraphs with respect to first paragraph in DOM body.

    <div>
    <input type="text" placeholder="something">
    <p>This is first paragraph</p>
    <button>Button </button>
    <p> This is second paragraph</p>
    <p>This is third paragraph</p>
    </div>

    Styling part 
    <style type="text/css">
        p+p{
            color: red;
            font-weight: bolder;
        }
    </style>

   It will style all sibling paragraph with red color.

final output look like this

enter image description here

Upvotes: 2

Matthew Vines
Matthew Vines

Reputation: 27561

It's the Adjacent sibling selector.

From Splash of Style blog.

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 (not inside) any h1 headings as blue.

h1>p selects any p element that is a direct (first generation) child (inside) of an h1 element.

  • h1>p matches <h1> <p></p> </h1> (<p> inside <h1>)

h1+p will select the first p element that is a sibling (at the same level of the dom) as an h1 element.

  • h1+p matches <h1></h1> <p><p/> (<p> next to/after <h1>)

Upvotes: 234

Mara Morton
Mara Morton

Reputation: 4460

It would match any element p that's immediately adjacent to an element 'p'. See: http://www.w3.org/TR/CSS2/selector.html

Upvotes: 12

Gordon Gustafson
Gordon Gustafson

Reputation: 41209

"+" is the adjacent sibling selector. It will select any p DIRECTLY AFTER a p (not a child or parent though, a sibling).

Upvotes: 46

Related Questions