If I want to add styling to all p elements inside of a div, why should I use
div > p{
*style here*
}
as opposed to just
div p{
*style here*
}
furthermore, if I want to use a pseudo class, why would I then choose to use ">"
div > p:first-child{
*style here*
}
instead of
div p:first-child{
*style here*
}
Are there any benefits or drawbacks?
what does that operator do?
It's the direct child, not a recursive match.
CSS
div > p {
}
HTML
<div>
<p>Match</p>
<span>
<p>No match</p>
</span>
</div>
CSS
div p {
}
Markup
<div>
<p>Match</p>
<span>
<p>Match</p>
</span>
</div>
Because it means direct child.
Your second example would match the p in this example
<div>
<header>
<p>
</p>
</header>
</div>
> and (space) are relationship selectors meaning "child" and "descendant" respectively. On top of the semantic differences others have pointed out, a child selector computes faster as it avoids redundant DOM tree traversal on non-matching elements.
Related
This question's answers are a community effort. Edit existing answers to improve this post. It is not currently accepting new answers or interactions.
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.
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>)
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
http://css-tricks.com/almanac/selectors/a/adjacent-sibling/
http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors
https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors
"+" is the adjacent sibling selector. It will select any p DIRECTLY AFTER a p (not a child or parent though, a sibling).
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.
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:
+ 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.
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
I want to provide a padding of 30px to p element inside the div element. But I don't want that padding to be applied to the img tag inside p.
<div class="desc">
<p>first paragraph</p>
<p><img src="....."></p>
<p>second paragraph</p>
</div>
I have attached the required result below.
You can use the > selector.
div > p { padding: 30px; }
It applies the styling only on the direct child elements (= direct descendants)
As #Khaaytil stated, you can use > between selectors.
Look here for more reference > direct descendant selector
For different scenarios u can see these 2 also:
Using + adjacent sibling selector
Using ~ non-adjacent sibling selector
Also you can try :only-child Selector
But as best practice you should really not wrapping images in a tag. Just put the image between the 2 tags, or wrap it in another tag.
This question's answers are a community effort. Edit existing answers to improve this post. It is not currently accepting new answers or interactions.
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.
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>)
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
http://css-tricks.com/almanac/selectors/a/adjacent-sibling/
http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors
https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors
"+" is the adjacent sibling selector. It will select any p DIRECTLY AFTER a p (not a child or parent though, a sibling).
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.
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:
+ 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.
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
I always wondered how can you select an element that is deeply buried in other elements that have classes and id's ?
For example :
<div class="container" id="footer">
<div class="sixteen columns"><span>some text here</span>
If I want to select element then what I would do is write in CSS the following :
.container #footer .sixteen .columns span {
font-weight: bold;
}
Unfortunately it seems that this method is not valid or recognized by browsers.
Let's say that I don't want to give any general styles to 'sixteen columns' class or span itself. I just want to apply very specific styles to this very specific element.
How should I select that span element ?
Given your code:
<div class="container" id="footer">
<div class="sixteen columns"><span>some text here</span>
</div><!-- I've chosen to close the opened div element -->
Your selector cannot work, but it is definitely "recognized by browsers." The problem is that it is not, as you say, 'valid' (for the HTML structure that you have).
The problem is that, in CSS, white-space implies an ancestor-descendant relationship, so:
E F
Selects an element, matching selector F, that is a descendant of selector E; your own selector:
.container #footer .sixteen .columns span
selects a <span> element, within an element of class 'columns', within an element of class 'sixteen', within an element of id="footer" itself within an element of class 'container'; giving HTML:
<element class="container">
<element id="footer">
<element class="sixteen">
<element class="columns">
<span></span>
</element>
</element>
</element>
Which bears no resemblance to your own HTML. As white-space establishes an ancestor-descendant relationship, the corollary is that no white-space implies the same element, which is what you were aiming for, I think. Omitting the white-space, then, gives the following selector:
#footer.container .sixteen.columns span {
/* CSS here */
}
This selector is, probably, overly complex (given that an id uniquely identifies an element1), and could be re-written as simply:
#footer .sixteen.columns span {
/* CSS here */
}
Or even, if you're willing, and able, to sacrifice some specificity:
#footer span {
/* CSS here */
}
Note that a class-name is often used in JavaScript to denote a state, state-change or interaction of some kind; so it's not definitively redundant to combine an id with a class (#footer.container), but if the class is not dynamically added or removed, it probably is redundant and unnecessary. As with all things in web-development, it's worth experimenting to find out what works for you; contemporary browsers are fast enough for the most part, that adding a class-name to the selector isn't going to slow things down substantially, but beware of time-critical use-cases, when it's best to remove everything that's not absolutely necessary.
References:
CSS Selectors (and combinators).
with:
#footer > .sixteen.columns > span
Your selector does not work because you have spaces between selectors which refer to the same element.
e.g. .container #footer
But the space reads: "find an element with the id footer that is a descendant of an element with a class that is container". But you mean: "find an element that has the class container AND the id footer" which you can do by concatenating them without a space:
e.g. .container#footer
See: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors
Rearrange your selector like this
#footer.container .sixteen.columns span {
font-weight: bold;
}
<div class="container" id="footer">
<div class="sixteen columns">
<span>some text here</span>
</div>
</div>
#footer span { font-weight: bold; }
<div class="rightsidebox">
<div class="item-info-list">
<p>Model: AIDCU</p>
<div class="product-details">
<p></p>
<div class="price-box"> <span class="regular-price" id="product-price-1617-related">
<span class="price">$8.99</span></span>
</div>
<p></p>
</div>
</div>
I want to make a style for price and make the color green just in a case it is in the rightbox div and I want to use css , I cannot change the structure because it is a theme and it should not have conflict with other prices in other themes
I can use div.rightsidebox>div.item-info-list
but I cannot go further because of the paragraph in there
how can I solve it? I have weakness in using ">" and multiple classes in each other
This I believe is what you are looking for:
div.rightsidebox>div.item-info-list>div.product-details {
background:#ff0000;
}
JSFiddle: http://jsfiddle.net/RF5e7/
If you merely just want to select the price and make it green if it is contained by rightbox:
.rightsidebox .price {
color: green !important;
}
.rightsidebox .price { color: green !important; } // important to override other styles
EDIT: Usage of > - selectorr
The element>element selector is used to select elements with a specific parent. Note: Elements that are not directly a child of the specified parent, are not selected. More info
div.rightsidebox>div.item-info-list .price{
color: green;
}
JSFiddle example.
.rightsidebox .item-info-list p {
/* code */
}
This would go down to the paragraph element inside the classes defined there inside the stylesheet (above off course).
You don't need to be using div.rightsidebox that is required only if you're having class names for multiple elements. Otherwise only .rightsidebox is OK.
You can learn more about the CSS child selectors here: https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors