This question already has answers here:
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
Closed 4 years ago.
<div class="tabs">
<div class="title">A</div>
<div class="title">B</div>
<div class="content">Something</div>
</div>
How can I select B title without restructuring my html, and there might be C, D, E and more title be added in. I tried below css it doesn't work
Use nth-child and nth-of-type selectors. Choose any of the below according to your needs.
Solution: 1
.tabs :nth-child(2){
color:red;
}
Solution: 2
.tabs .title:nth-child(2){
color:red;
}
Solution: 3
.tabs .title:nth-of-type(2){
color:red;
}
.tabs .title:nth-child(2) {
color : green;
}
Related
This question already has answers here:
What does the "+" (plus sign) CSS selector mean?
(9 answers)
What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB? [duplicate]
(3 answers)
How to affect other elements when one element is hovered
(9 answers)
Closed 2 years ago.
I want to change the background color of the box once i check the checkbox, but it doesn't work with the code i wrote. am i missing something? thanks
.box{
width: 100px;
height: 100px;
background-color: green;
}
input[type="checkbox"]:checked .box{
background-color: red;
}
<input type="checkbox" name="" />
<div class="box"></div>
this rule doesn't work because .box is not in input
input[type="checkbox"]:checked .box
but you can use adjacent sibling combinator:
input[type="checkbox"]:checked + .box
or general sibling combinator:
input[type="checkbox"]:checked ~ .box
This question already has answers here:
CSS3 selector :first-of-type with class name?
(10 answers)
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
Closed 4 years ago.
.bwrapa {
background: gold;
}
.bwrapa:first-of-type {
background: blue;
}
.bwrapa:last-of-type {
background: blue;
}
<div class='parent'>
<div class='abc'>lorem</div>
<div class='abc'>lorem</div>
<div class='bwrapa'>lorem</div>
<div class='abc'>lorem</div>
<div class='bwrapa'>lorem</div>
<div class='bwrapa'>lorem</div>
<div class='abc'>lorem</div>
</div>
Why do all bwrapa classes have background: gold?
First and Last of them should have background: blue - shouldn't it?
What seems to be the problem and how do I fix it ?
.bwrapa:first-of-type will select the first child <div> of each parent element (since .bwrapa is a div element), not the first element with class bwrapa. See the documentation for more info.
This question already has answers here:
CSS3 selector :first-of-type with class name?
(10 answers)
Closed 4 years ago.
Having some issues targeting the a div using the CSS :first-of-type and applying the styling to all. Any ideas on where I'm going wrong?
Working example here
.message:first-of-type {
background: purple;
}
If you want purple background only for first .message use below css. Pseudoclass :first-of-type it's only for type (div, p etc), not class.
.message {
background: purple;
}
.message ~ .message {
background: none;
}
This question already has answers here:
nth-of-type vs nth-child
(7 answers)
Closed 7 years ago.
Say I have the following -
<div>
<span>First</span>
<span>Second</span>
<span>Third</span>
</div>
Is there a way to use CSS to modify the style of each separately, without having to apply a unique class in each case?
For example, something like div span { color: blue; } but then apply a different colour to the subsequent span and so on?
(...and yes, I have tried many Google searches first!)
Try nth-of-type or nth-child:
span:nth-of-type(1) {
color:blue;
}
span:nth-of-type(2) {
color:red;
}
span:nth-of-type(3) {
color:green;
}
here is the code example
This question already has answers here:
Can the :not() pseudo-class have multiple arguments?
(5 answers)
Closed 7 years ago.
I have this weird situation that I cannot make work :not that has two condition. Basically
I want to hide all div in a container except those having specific class.
For example this is the html
<div id="container">
<div class="show"></div>
<div class="extra"></div>
<div class="about"></div>
<div class="sample1"></div>
.
.
.
<div class="sampleetc"></div>
</div>
Now my css expression is like this , but it is not working
#container > div:not(.show), #container > div:not(.about){
display:none;
}
Any ideas why it is not working or good css expression for this, i presume, :not does not work with two condition, or i am guessing the first expression already hide .about
I believe you can just chain the :not selector like this:
div#container > div:not(.show):not(.about)
{
display: none;
}
It appears to work correctly on this fiddle.
This is what you want. Hide all inside the container but div.show and the next one
#container > div:not(.show) + div{
display:none;
}
DEMO