It seems CSS is right associative, and unlike programming languages, you cannot influence this with parentheses.
I have this general structure:
<div>
<div class='pizza'></div>
</div>
<p>Select me! Select me!</p>
<div>
<div class="pizza">
<p>Do NOT select me!</p>
</div>
</div>
I can't figure out the selector for a <p> that follows a sibling <div> containing a <div class="pizza">.
I tried this but the right-to-left associativity of CSS does not yield what I want:
div > div.pizza + p
I know this isn't right.
Can someone offer a pointer?
Combinators, at least the ones that are currently available, can only express a relationship between exactly two elements. As you've correctly observed, you cannot change the associativity of combinators. Because of this, and the fact that there is no parent counterpart to the > combinator for child elements, it is not possible to construct a CSS selector that represents both
div > div.pizza
and
div + p
where the first div in each selector represents the same element.
This associativity issue can be solved using the proposed :has() pseudo-class, which provides you with a relative selector syntax within a functional pseudo-class, allowing you to construct such selectors as
div:has(> div.pizza) + p
where p is the subject of the outermost selector. The relative selector > div.pizza is scoped to the first div selector — essentially, this is a combination of both of the first two complex selectors above, with the :has() pseudo-class acting just like any other simple selector.
It is not known yet if this proposed feature will be implemented in CSS.
See my answers to these related questions for more info:
Are parentheses allowed in CSS selectors?
How do I select an element based on the state of another element in the page with CSS?
You can't (yet) select your chosen <p> using standard CSS selectors.
You can, however, deploy the axe CSS selector extension library which will enable you to write selectors in your stylesheet which select parents, ancestors, previous siblings and remote elements.
Here is an example:
p {
color: rgb(191, 191, 191);
}
.pizza < div + p {
font-weight: bold;
font-size: 24px;
color: rgb(255, 0, 0);
}
<div>
<div class="pizza"></div>
</div>
<p>Select me! Select me!</p>
<div>
<div class="pizza">
<p>Do NOT select me!</p>
</div>
</div>
<script src="https://rouninmedia.github.io/axe/axe.js"></script>
Further Reading on axe Selectors:
http://www.rounin.co.uk/projects/axe/axe2.html
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
Is it possible to use the CSS3 selector :first-of-type to select the first element with a given class name? I haven't been successful with my test so I'm thinking it's not?
The Code (http://jsfiddle.net/YWY4L/):
p:first-of-type {color:blue}
p.myclass1:first-of-type {color:red}
.myclass2:first-of-type {color:green}
<div>
<div>This text should appear as normal</div>
<p>This text should be blue.</p>
<p class="myclass1">This text should appear red.</p>
<p class="myclass2">This text should appear green.</p>
</div>
No, it's not possible using just one selector. The :first-of-type pseudo-class selects the first element of its type (div, p, etc). Using a class selector (or a type selector) with that pseudo-class means to select an element if it has the given class (or is of the given type) and is the first of its type among its siblings.
Unfortunately, CSS doesn't provide a :first-of-class selector that only chooses the first occurrence of a class. As a workaround, you can use something like this:
.myclass1 { color: red; }
.myclass1 ~ .myclass1 { color: /* default, or inherited from parent div */; }
Explanations and illustrations for the workaround are given here and here.
The draft CSS Selectors Level 4 proposes to add an of <other-selector> grammar within the :nth-child selector. This would allow you to pick out the nth child matching a given other selector:
:nth-child(1 of p.myclass)
Previous drafts used a new pseudo-class, :nth-match(), so you may see that syntax in some discussions of the feature:
:nth-match(1 of p.myclass)
This has now been implemented in WebKit, and is thus available in Safari, but that appears to be the only browser that supports it. There are tickets filed for implementing it Blink (Chrome), Gecko (Firefox), and a request to implement it in Edge, but no apparent progress on any of these.
This it not possible to use the CSS3 selector :first-of-type to select the first element with a given class name.
However, if the targeted element has a previous element sibling, you can combine the negation CSS pseudo-class and the adjacent sibling selectors to match an element that doesn't immediately have a previous element with the same class name :
:not(.myclass1) + .myclass1
Full working code example:
p:first-of-type {color:blue}
p:not(.myclass1) + .myclass1 { color: red }
p:not(.myclass2) + .myclass2 { color: green }
<div>
<div>This text should appear as normal</div>
<p>This text should be blue.</p>
<p class="myclass1">This text should appear red.</p>
<p class="myclass2">This text should appear green.</p>
</div>
I found a solution for your reference. from some group divs select from group of two same class divs the first one
p[class*="myclass"]:not(:last-of-type) {color:red}
p[class*="myclass"]:last-of-type {color:green}
BTW, I don't know why :last-of-type works, but :first-of-type does not work.
My experiments on jsfiddle... https://jsfiddle.net/aspanoz/m1sg4496/
This is an old thread, but I'm responding because it still appears high in the list of search results. Now that the future has arrived, you can use the :nth-child pseudo-selector.
p:nth-child(1) { color: blue; }
p.myclass1:nth-child(1) { color: red; }
p.myclass2:nth-child(1) { color: green; }
The :nth-child pseudo-selector is powerful - the parentheses accept formulas as well as numbers.
More here: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
You can do this by selecting every element of the class that is the sibling of the same class and inverting it, which will select pretty much every element on the page, so then you have to select by the class again.
eg:
<style>
:not(.bar ~ .bar).bar {
color: red;
}
<div>
<div class="foo"></div>
<div class="bar"></div> <!-- Only this will be selected -->
<div class="foo"></div>
<div class="bar"></div>
<div class="foo"></div>
<div class="bar"></div>
</div>
As a fallback solution, you could wrap your classes in a parent element like this:
<div>
<div>This text should appear as normal</div>
<p>This text should be blue.</p>
<div>
<!-- first-child / first-of-type starts from here -->
<p class="myclass1">This text should appear red.</p>
<p class="myclass2">This text should appear green.</p>
</div>
</div>
Not sure how to explain this but I ran into something similar today.
Not being able to set .user:first-of-type{} while .user:last-of-type{} worked fine.
This was fixed after I wrapped them inside a div without any class or styling:
https://codepen.io/adrianTNT/pen/WgEpbE
<style>
.user{
display:block;
background-color:#FFCC00;
}
.user:first-of-type{
background-color:#FF0000;
}
</style>
<p>Not working while this P additional tag exists</p>
<p class="user">A</p>
<p class="user">B</p>
<p class="user">C</p>
<p>Working while inside a div:</p>
<div>
<p class="user">A</p>
<p class="user">B</p>
<p class="user">C</p>
</div>
I found something that works
If you have a bigger class which contains something like grid, all of elements of your another class
You can do like that
div.col-md-4:nth-child(1).myclass{
border: 1px solid #000;
}
Simply :first works for me, why isn't this mentioned yet?
Is it possible to target also another element like in the example ?
click
<div id="AAA">some content</div>
<div id="BBB">some content</div>
Something like...
#AAA:target #BBB{color:red}
In this case, you could use the adjacent sibling combinator, +.
EXAMPLE HERE
#AAA:target + #BBB {
color:red
}
Depending on the markup, it might be better to use the general sibling combinator, ~. (example)
I want to select spans that are not the descendants of a specific class, let's call it "no". Here's my CSS:
div:not(.no) span{background-color:#00f;}
Here's the HTML
<div>
<span>yes 1</span>
</div>
<div class="no">
<span>no 1</span>
</div>
<div class="no">
<div>
<span>no 2</span>
</div>
</div>
Two questions:
Why does my CSS apply to both yes 1 and no 2?
Why does the whole thing break if I switch to a universal selector?
*:not(.no) span{background-color:#00f;}
Here's the code in JSFiddle: http://jsfiddle.net/stephaniehobson/JtNZm/
Both of the span elements' parent div elements don't have the class no, regardless of whether any other ancestors do have it or not:
<div> <!-- This is div:not(.no), pretty much a given -->
<span>yes 1</span>
</div>
<div class="no"> <!-- In this case, although this is div.no... -->
<div> <!-- ... this is div:not(.no)! -->
<span>no 2</span>
</div>
</div>
Both html and body, which are ancestors of your div and span elements, satisfy *:not(.no) when using a universal selector (or rather, when omitting a type selector). This causes all of your span elements to have the background color.
One solution to this is to anchor your negation filter to the body element using the child combinator, if your top-level div elements will always be children of body:
body > div:not(.no) span { background-color: #00f; }
jsFiddle demo
Another solution is to simply use override styles.
BoltClock is correct. It might make more sense if you phrase the selector like this:
Select any span element
that is descended from a div element
whose class value does not contain the word no.
Each of the selected spans in your example is in fact descended from a div whose class value does not contain the word no—the fact that the second of them is also descended from a div whose class value does contain the word no doesn’t negate (ha!) the previous statement.
What’s interesting is I would wager that if you moved the second no down a level, the second span would still be matched. CSS doesn’t have a notion of element proximity, so any ancestor div should suffice to match the selector, regardless of whether it’s “closer” to the span or not.
I think the best choice is to split your statement into 2:
div span { background-color:#00f; }
.no span { background-color:#fff; }
You can see the effect here: http://jsfiddle.net/JHTqp/
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