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.
Related
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed last month.
Good day all,
I have an a tag with class "WORKSHEET_block" and which is contained in 3 other div.
The css to style is (which does not work):
.WORKSHEET_block < .fc-daygrid-event-harness < .fc-daygrid-day-events < .fc-daygrid-day-frame {
background-color: green !important;
}
<div class="fc-daygrid-day-frame">
<div class="fc-daygrid-day-events">
<div class="fc-daygrid-event-harness">
<a class="WORKSHEET_block">My Value</a>
</div>
</div>
</div>
I know if it was the other way around from parent to child we would use ">" from the parent to the child.
Is there anywhere I can select the parent from the child?
.fc-daygrid-day-frame:has(.WORKSHEET_block) {
background-color: green;
}
<div class="fc-daygrid-day-frame">
<div class="fc-daygrid-day-events">
<div class="fc-daygrid-event-harness">
<a class="WORKSHEET_block">This is the child using the class</a>
</div>
</div>
</div>
<div class="fc-daygrid-day-frame">
<div class="fc-daygrid-day-events">
<div class="fc-daygrid-event-harness">
<a>this child does not have any class</a>
</div>
</div>
</div>
Using :has relative selector. I have inserted an extra HTML code it doesn't have a WORKSHEET_block class, so the style is not applying to it
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.
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:
Using only CSS, show div on hover over another element
(14 answers)
Closed 5 years ago.
i Have used bootstrap and css , here is my code
<div class = "row" id="parent"=>
<div class="col-md-8" id="ClildDiv1">
//Some Content
</div>
<div class="col-md-4" id="ChildDiv2" style="display:none">
//Some Content
<div>
</div>
Now i want on hover on
<div class="row Parent>
All its Child should be visible in this case
<div class="col-md-4 ChildDiv2">
Any Help Would Be Appreciated And i want to achieve that only by CSS styling
You want one of the sibling selectors. General sibling ~ or next sibling +
.ClildDiv1:hover ~ .ChildDiv2 {
display: block;
}
See fiddle here
Or, the parent hover for any child div would be
.Parent:hover > div {
display: block;
}
This question already has answers here:
CSS Child vs Descendant selectors
(8 answers)
Closed 8 years ago.
These appear to do the same things. I've never been sure what the difference is.
<style>
#a > b > i{
color: blue;
}
#b b i{
color: red;
}
</style>
<div id="a">
<b><i>text</i></b>
</div>
<div id="b">
<b><i>text</i></b>
</div>
There is difference.
The > is a child selector which selects only direct/immediate elements where as #a b i will select child elements at any depth inside the specified parent.
For your markup:
<div id="a">
<b><i>text</i></b>
</div>
<div id="b">
<b><i>text</i></b>
</div>
Both should work but still child selector is more appropriate in that situation. Consider this:
<div id="a">
<b><i>text</i></b>
</div>
<div id="b">
<b><i>text</i></b>
<b><i>text<div><span><i>text</i></span>></div></i></b>
</div>
In the above case though, the child selector will not be applied on <i> inside the span element in <div><span><i>text</i></span>></div>, which is not a direct child of <b>element.
More Info:
CSS Child Selectors
Right from the specs
Child
An element A is called the child of element B if and only if B is the parent of A.
Descendant
An element A is called a descendant of an element B, if either (1) A is a child of B, or (2) A is the child of some element C that is a descendant of B.