This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
Closed 4 years ago.
I'm looking for a css selector that selects elements of a class who's immediate successor (if there is one) does not have that class.
So lets say I have a div:
<div>
<span id="1" class="myClass1">
<span id="2">
<span id="3" class="myClass1">
<span id="4" class="myClass1">
<span id="5">
</div>
This selector would grab spans 1 and 4.
Is this possible without javascript?
Try this selector:
span + span:not(.myClass1) {
border: 1px solid blue;
}
This is the adjacent sibling selector, coupled with the not() selector.
Related
This question already has answers here:
What CSS selector can be used to select the first div within another div
(4 answers)
Why doesn't nth-of-type/nth-child work on nested elements?
(1 answer)
Closed 2 years ago.
Hi can you please help with some css,
I have this code
<div>
<div>
<input class="test"/>
</div>
</div>
<div>
<div>
<input class="test"/>
</div>
</div>
<div>
<div>
<input class="test"/>
</div>
</div>
I want to change some properties only in my first input, can somebody help me solve this ?
Thanks
In your case, you can use these css rules:
div:nth-child(1) div input.test {
color: green;
}
or
div:first-of-type div input.test {
color: green;
}
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:
What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB? [duplicate]
(3 answers)
Closed 4 years ago.
i am trying to bind style in my css style using below format but its not working and i am learner for web development can some one help me please what is mistack?
css
.block-header.row.sample h1{
color: aqua;
}
html
<div class="block-header">
<div class="row sample">
<div class="col-sm-6">
<h1 class="page-title">Pending Approvals</h1>
</div>
</div>
</div>
The problem in your rule is that there are no spaces between your classes, which makes the selector any h1 element with the parent having classes block-header, row, and sample.
You would need to put spaces so that the selector knows these elements are nested inside each other:
.block-header .row.sample h1 {
color: aqua;
}
Learn more about how these selectors work from this FreeCodeCamp guide.
Your style rule is wrong, it should be: .block-header .row.sample h1 instead of .block-header.row.sample h1. When you have a style for an element that's a descendant of another one (in your case .row.sample is a child of .block-header) you should have the parent first, followed by a space (or > if it's a direct child) and then the descendant element, just like you're doing with the h1...
You can see it works with that simple change:
.block-header .row.sample h1{
color: aqua;
}
<div class="block-header">
<div class="row sample">
<div class="col-sm-6">
<h1 class="page-title">Pending Approvals</h1>
</div>
</div>
</div>
You can read more about selectors in mdn.
This question already has answers here:
CSS '>' selector; what is it? [duplicate]
(7 answers)
What does the "+" (plus sign) CSS selector mean?
(9 answers)
Closed 5 years ago.
When using CSS, I can query elements in the following ways:
div > .class
div .class
div + .class
However I can't quite tell the exact difference between each of these DOM queries. Do they all point to child elements? I know that ">" and " " (space) do.
But under what circumstances would I use each?
In CSS these are called Combinators and means three different things:
div > .class: is called Child selector and will select all elements that are direct children of a div and have the class .class.
div .class: is called Descendant selectors and will select all elements inside a div and having the class .class.
div + .class: is called Adjacent sibling selector and will match any element that immediately follows a div and have the class .class.
Example:
In the following example:
<div>
<p class="test">
<a href="#" class="test">
Testing link</a>
<img class="test"/>
</p>
<span class="test">A span</span>
</div>
<h4 class="test">A title</h4>
div > .test will match only <p> and <span> elements.
div .test will match <p>, <a>, <img> and <span> elements.
div + .test will match only <h4> element because it follows the <div> immediately.
Demo:
div .test {
background: yellow;
}
div>.test {
background: red;
}
div+.test {
background: green;
}
<div>
<p class="test">
Pragraph
<a href="#" class="test">
link</a>
<img class="test" width="50px" height="50px" />
</p>
<span class="test">Span</span>
</div>
<h4 class="test">Title</h4>