This question already has answers here:
CSS selector for first element with class
(23 answers)
How to apply css to top level element only
(2 answers)
Is there a CSS parent selector?
(33 answers)
Closed 3 years ago.
I have a html code :
<div class="body">
<p></p>
<div class="select">
<p class="p1"></p>
<div class="select"></div>
<p class="p2"></p>
</div>
</div>
I want to select div element with class select. There are two element of this type which I want the parent one. How can I do that? Pay attention that the above code is just an example and the code can become complex arbitrarily.
Two div elements with same class may not be direct child and parent of each other and I want to do this by css-selectors if possible.
Style the .select and then overwrite those styles in .select .select:
.select {
/* top level select element */
color: red;
}
.select .select {
/* reset styles in nested select element */
color: initial;
}
<div class="body">
<p>Text</p>
<div class="select">
<p class="p1">Top Level Select</p>
<div class="select">Nested Select</div>
<p class="p2">Top Level Select</p>
</div>
<div>
<p class="p1">Text</p>
<div class="select">Top Level Select</div>
<p class="p2">Text</p>
</div>
</div>
Related
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Is there a "previous sibling" selector?
(30 answers)
Closed 2 years ago.
I want to change div element's color by other div element's hover. I've tried this, but it doesn't works. HTML:
<div class="test1">
<p></p>
</div>
<div class="test2">
<a>
<span></span>
</a>
</div>
and CSS:
p:hover ~ a
{
filter: hue-rotate(110deg);
}
a
{
color: #03e9f4;
}
For sure, it works with HTML like this...
<div class="test1">
<p></p>
<a>
<span></span>
</a>
</div>
but I want it in two other divs, is it possible?
The reason it works in the last example is that the hovered element and target element are siblings within the same div (and you are using the general sibling combinator "~")- the only way to achieve that is to have the hover pseudostate on the first div and use the same logic to target the second div and then into the second div to the a element via the descendant selector (" ").
There is no way in CSS alone to achieve the effect when you hover over the p - it has to be the parent element that is the sibling. You could easily do this with JS - but not with only CSS.
The following will change the color of the a element when you hover over the parent div of the p. I also added a little :after pseudo-element to demonstrate the hovering result better.
a {
color: #03e9f4;
}
.test1:hover ~ .test2 a {
filter: hue-rotate(110deg);
}
.test1:hover ~ .test2 a:after {
content: ' and my color changed because you hovered over the previous div'
}
<div class="test1">
<p>I am in the first div</p>
</div>
<div class="test2">
<a>
<span>I am in the second div</span>
</a>
</div>
This question already has answers here:
Multiple descendant children selector with css [duplicate]
(3 answers)
What does the ">" (greater-than sign) CSS selector mean?
(8 answers)
Closed 3 years ago.
I have a following DOM:
<div class="someclass">
<p>
<p>
<span></span>
</p>
</p>
<div>
<p>
<span></span>
</p>
</div>
</div>
I need to apply a stylesheet to span tags which are under the div with someclass class, but NOT to span tags which are under nested div.
There might be any other hierarchy of tags among them and span tags might be nested among any tags (except div). And using > will not help.
Can you give me a selector to select them?
You can use immediate child > to accomplish this. You can also use the * selector along with negation to accomplish non-div nesting look-ups.
.someclass > p,
.someclass *:not(div) p {
background-color: yellow;
}
<div class="someclass">
<p>Highlight me</p>
<section><p>Also hightlight me</section>
<section>
<section>
<p>Also hightlight me
</section>
</section>
<div>
<p>Do not highlight me</p>
</div>
</div>
This question already has answers here:
Is there a CSS selector for the first direct child only?
(8 answers)
CSS selector for targeting only immediate children and not other identical descendants
(2 answers)
Closed 4 years ago.
I am trying to select only children of a div using CSS.
HTML:
<div class="wrapper">
<div>Child
<div>GrandChild</div>
</div>
<div>Child</div>
<div>Child</div>
</div>
CSS:
.wrapper div:first-child {
display: inline-block;
}
Fiddle: https://jsfiddle.net/781vcf4L/3/
The above CSS applies the CSS property only to a grandchild. I removed the :first-child part and it applies the property to all divs (children and grandchild).
This is what I am trying to achieve:
<div class="wrapper">
<div style="display: inline-block">Child
<div>GrandChild</div>
</div>
<div style="display: inline-block">Child</div>
<div style="display: inline-block">Child</div>
</div>
How can I apply the CSS property to children only?
A space between two selectors is the descendant combinator which, unsurprisingly, selects all descendants including children and grandchildren.
Replace it with the child combinator (>) which selects only children.
This question already has answers here:
What do commas and spaces in multiple classes mean in CSS?
(9 answers)
Closed 4 years ago.
How to select multiple divs and apply hover on them in such a way that when cursor is moved on each div, only respective divs gets hovered and not all of them together?
<div class="itemOne"> Menu Item One </div>
<div class="itemTwo"> Menu Item Two </div>
.
.
.
<div class="itemTen"> Menu Item Ten </div>
css:
.itemOne:hover .itemTwo:hover{
/*this is not working*/
}
or
.itemOne.itemTwo:hover{
/*this is not working*/
}
You have to seperate each selector by a comma.
.itemOne:hover,
.itemTwo:hover,
.itemThree:hover {
color: black;
}
A more appropriate solution would be to add the same class to all those elements. eg:
<div class='parent'>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
</div>
.child:hover {
color: black;
}
Add a common class to all the divs that u want to add the hover effect
<div class="hover-effect itemOne"> Menu Item One </div>
<div class="hover-effect itemTwo"> Menu Item Two </div>
...
<div class="hover-effect itemTen"> Menu Item Ten </div>
then add styles to that hover-effect class in css
.hover-effect:hover {
//add styles here
}
Give all divs a common class
.commonclass:hover{}
This question already has answers here:
CSS: Select element only if a later sibling exists
(9 answers)
Closed 5 years ago.
I have the following structure, where second element may or may not appear.
<div class="wrapper">
<div class="firstElement"></div>
<div class="secondElement"></div>
</div>
I want to conditionally set styles on .firstElement ONLY if .secondElement exists.
Is there a way to do this with PURE CSS? With either sibling selectors/ parent selectors?
Thanks!
In general, no. CSS reads forwards/down the DOM - it won't read backwards/up. But with this markup, you could use :not(:last-child)
.firstElement:not(:last-child) {
color: red
}
<div class="wrapper">
<div class="firstElement">target this</div>
<div class="secondElement"></div>
</div>
<div class="wrapper">
<div class="firstElement">not this</div>
</div>