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>
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:
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 ">" (greater-than sign) CSS selector mean?
(8 answers)
Closed 1 year ago.
I want to target the first p only in #page-content. But all first p in all subclasses are targeted - see following code-example. How can I avoid this?
Thanks in advance!!!
#page-content p:first-of-type {
color: red;
}
<div id="page-content">
<div id="summary">
<p>Some summary (SHOULD NOT BE TARGETED)</p>
</div>
<p>The first paragraph, ONLY THIS should be targeted.</p>
<p>The second, show me!</p>
<div class="someclass">
<p>1st paragraph in .someclass (SHOULD NOT BE TARGETED)</p>
<p>2nd paragraph in .someclass</p>
</div>
</div>
Look for immediate descendants using the ">" selector
#page-content > p:first-of-type {
color: red;
}
<div id="page-content">
<div id="summary">
<p>Some summary (SHOULD NOT BE TARGETED)</p>
</div>
<p>The first paragraph, ONLY THIS should be targeted.</p>
<p>The second, show me!</p>
<div class="someclass">
<p>1st paragraph in .someclass (SHOULD NOT BE TARGETED)</p>
<p>2nd paragraph in .someclass</p>
</div>
</div>
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:
CSS selector for first element with class
(23 answers)
Closed 8 years ago.
I have an aside with two <div class="sku"> elements. I'm trying to use CSS to manipulate the :first-child but it doesn't work. However, when trying to access the :last-child it does.
JSFiddle
HTML
<aside>
<h1>Product Name</h1>
<div class="sku">
<h3>
100 – Small
</h3>
<div class="dimension">
<ul>
<li>
<span class="title">
Product Dimensions
</span>
<span class="specs">
23.75w
x
17.75h
x
28d
</span>
</li>
</ul>
</div>
</div>
<div class="sku">
<h3>
200 – Large
</h3>
<div class="dimension">
<ul>
<li>
<span class="title">
Product Dimensions
</span>
<span class="specs">
29.75w
x
17.75h
x
28d
</span>
</li>
</ul>
</div>
</div>
</aside>
CSS
.sku:first-child {
display:none !important; /*doesn't hide the first child*/
}
.sku:last-child {
display:none !important; /*does hide the first child*/
}
Why won't :first-child select the first div?
You cannot use :first-child psuedo class since .sku is not the first child. A better option is to use either :first-of-type (for first child) or :nth-of-type (which can accept a number or an equation) pseudo classes:
.sku:nth-of-type(1) {
display: none;
}
Updated Demo
The :first-child means the first child. Which is in this case the H1. So this does not work. You can use:
h1 + .sku { }
But only if this is the order you place your HTML.