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
?
This question is related to
css
css-selectors
It selects the next paragraph and indents the beginning of the paragraph from the left just as you might in Microsoft Word.
"+" is the adjacent sibling selector. It will select any p DIRECTLY AFTER a p (not a child or parent though, a sibling).
It would match any element p
that's immediately adjacent to an element 'p'. See: http://www.w3.org/TR/CSS2/selector.html
It means it matches to every p
element which is immediately adjacent
www.snoopcode.com/css/examples/css-adjacent-sibling-selector
The Plus (+) will select the first immediate element. When you use + selector you have to give two parameters. This will be more clear by example: here div and span are parameters, so in this case only first span after the div will be styled.
div+ span{
color: green;
padding :100px;
}
<div>The top or first element </div>
<span >this is span immediately after div, this will be selected</span>
<span>This will not be selected</span>
Above style will only apply to first span after div. It is important to note that second span will not be selected.
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
The +
sign means select an "adjacent sibling"
For example, this style will apply from the second <p>
:
p + p {
font-weight: bold;
}
_x000D_
<div>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</div>
_x000D_
See this JSFiddle and you will understand it: http://jsfiddle.net/7c05m7tv/ (Another JSFiddle: http://jsfiddle.net/7c05m7tv/70/)
Adjacent sibling selectors are supported in all modern browsers.
It's the Adjacent sibling selector.
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>
)+
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.
+
selector is called Adjacent Sibling Selector
.
For example, the selector p + p
, selects the p
elements immediately following the p
elements
It can be thought of as a looking outside
selector which checks for the immediately following element.
Here is a sample snippet to make things more clear:
body {_x000D_
font-family: Tahoma;_x000D_
font-size: 12px;_x000D_
}_x000D_
p + p {_x000D_
margin-left: 10px;_x000D_
}
_x000D_
<div>_x000D_
<p>Header paragraph</p>_x000D_
<p>This is a paragraph</p>_x000D_
<p>This is another paragraph</p>_x000D_
<p>This is yet another paragraph</p>_x000D_
<hr>_x000D_
<p>Footer paragraph</p>_x000D_
</div>
_x000D_
Since we are one the same topic, it is worth mentioning another selector, ~
selector, which is General Sibling Selector
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 how it looks like with the same markup:
body {_x000D_
font-family: Tahoma;_x000D_
font-size: 12px;_x000D_
}_x000D_
p ~ p {_x000D_
margin-left: 10px;_x000D_
}
_x000D_
<div>_x000D_
<p>Header paragraph</p>_x000D_
<p>This is a paragraph</p>_x000D_
<p>This is another paragraph</p>_x000D_
<p>This is yet another paragraph</p>_x000D_
<hr>_x000D_
<p>Footer paragraph</p>_x000D_
</div>
_x000D_
Notice that the last p
is also matched in this sample.
Source: Stackoverflow.com