This question already has answers here:
CSS: How to say .class:last-of-type [classes, not elements!] [duplicate]
(2 answers)
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
Closed 3 years ago.
Without knowing a structure of html, I would like to select the last element .foo inside .main. In other words the closest element of class .foo to closing tag of .main.
<div class="main">
<div class="foo a">
a
</div>
<div class="foo b">
b
<div class="foo c">
c - select only this (last .foo among all descendants)
</div>
<div class="d">
d
</div>
</div>
</div>
Of course I can .main > .foo > .foo but I want a generic solution.
Related
This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
Closed last month.
Is there a way to select elements with CSS based on whether class A or class B precedes the element first? For example:
<parent>
<div> 1 </div>
<div class='A'></div>
<div> 2 </div>
<div class='B'></div>
<div> 3 </div>
<div> 4 </div>
<div class='A'></div>
<div> 5 </div>
</parent>
Is there a way to apply a style to divs 2 and 5 (divs preceded by class A before class B)
and another style to divs 3 and 4 (divs preceded by class B before class A)
?
I tried using the selectors .A ~ * and .B ~ * which almost works, but doesn't correctly apply to situations like div 5.
You can use the :has relational Pseudo-class to query for elements that has an upcoming .A sibling.
.A ~ div {
color: red;
}
.B ~ div:has(~ .A) {
color: green;
}
<div> 1 </div>
<div class='A'></div>
<div> 2 </div>
<div class='B'></div>
<div> 3 </div>
<div> 4 </div>
<div class='A'></div>
<div> 5 </div>
See https://developer.mozilla.org/en-US/docs/Web/CSS/:has#browser_compatibility for browser compatibility.
This question already has answers here:
What does the "+" (plus sign) CSS selector mean?
(9 answers)
What does the "~" (tilde/squiggle/twiddle) CSS selector mean?
(3 answers)
Closed 2 years ago.
I need to add a selector in css to bold the paragraph adjacent to the goals_container id.
Html code looks like:
<body>
<main>
<div id="goals_container">
</div>
<p> This is what I want to access </p>
</main>
</body>
You need the + (adjacent sibling) selector:
#goals_container + p {
background: tomato;
}
<body>
<main>
<div id="goals_container">
</div>
<p> This is what I want to access </p>
</main>
</body>
This question already has answers here:
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
Closed 3 years ago.
I want to apply some css to a div element matching a class name, but there will multiple matches and only want to apply it to the second occurrence of this match.
The divs could be in any part of the body/html tree
I have tried this:
div[class*='id-type__']
Here is a simplified version of the html tree, please note the divs could be anywhere I have no control of this and the only common pattern is the class has a value 'id-type__'
<div>
<span>
<div class="id-type__">
<span></span>
</div>
</span>
</div>
<div class="id-type__">
<span>
<div class="id-type__">
<span></span>
</div>
</span>
</div>
What i want to do is only apply css to the second occurrence of where i find div[class*='id-type__']
Use the :nth-child() selector.
div:nth-child(2){
background-color: red;
}
<div>
<span>
<div>
<span>Content</span>
</div>
</span>
</div>
<div>
<span>
<div>
<span>Content</span>
</div>
</span>
</div>
This question already has answers here:
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
CSS - First child without certain class
(4 answers)
CSS selector for first element with class
(23 answers)
Closed 3 years ago.
With CSS is it possible to target the first child that hasn't got a class
<div class="parent">
<p class="hidden">Paragraph 1</p>
<p class="hidden">Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
</div>
So something like this ...
.parent p:not(.hidden):first-child {
color:#ff0000
}
The desired effect would be that paragraph 3 would now be red
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Is there a "previous sibling" selector?
(30 answers)
Closed 5 years ago.
I have question about CSS selectors. I have below structure - I can only modiffy CSS - I don't have access to modify html or JS.
<div class="wrapper">
<div>
<div>
<div class="open">
</div>
</div>
</div>
<div>
<div class="top">
</div>
</div>
</div>
Class open will be toggled. Can I make selector when:
div in 4 line has open - div with class top => .top {top:50px}
div in 4 line not has open - div with class top => .top{top:0px;}
This is possible?
Try this:
.wrapper div:not(.open){
...
}
You will need to adjust it to the get the correct DIV, because this will affect all of them inside .wrapper
In your case it looks like you need something like:
.wrapper > div > div > div:not(...){...}
However, that is a bad practice.
You can read some more here:
https://developer.mozilla.org/en-US/docs/Web/CSS/:not