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
?
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
?
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.
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>
)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>
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.
+
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 {
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 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 {
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.
+
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.
It would match any element p
that's immediately adjacent to an element 'p'. See: http://www.w3.org/TR/CSS2/selector.html
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 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.
It means it matches to every p
element which is immediately adjacent
www.snoopcode.com/css/examples/css-adjacent-sibling-selector