I am aware in **CSS** we can apply a set of styles to nested classes in elements (demonstrated at this page Apply CSS rules to a nested class inside a div).
I am now trying to apply a style to a nested class in a div. The catch here is I am unable to apply the style to only the nested class of the currently hovered element.
To explain further, here is an HTML snippet:
<div class="link-wrap">
<div class="link"> Github </div>
<hr class="text-underline">
<div>
<div class="link-wrap">
<div class="link"> Facebook </div>
<hr class="text-underline">
<div>
I would like that if I hover over the Github link, I would alter the style of the <hr> for the Github link alone.
Currently, when I do alter the style of the <hr>, both of the <hr>s have their styles altered at the same time.
I am trying to find a non-JS solution.
Is something like this getting close to what you're after?
.link-wrap:hover > .text-underline {
border-color: blue;
}
<div class="link-wrap">
<div class="link"> Github </div>
<hr class="text-underline">
</div>
<div class="link-wrap">
<div class="link"> Facebook </div>
<hr class="text-underline">
</div>
.link-wrap:hover > hr {
your styles
}
this will apply your styles to any <hr> that is the direct descendant of .link-wrap that is hovered
Related
My HTML code is similar to this :
<div class="navbar">
<div class="btn-section btn-1">
<p class="section pro">...</p>
</div>
</div>
<div class="navbar">
<div class="btn-section btn-2">
<p class="section notpro">...</p>
</div>
</div>
I'm using this in my CSS code :
.btn-1:hover {
.pro {
...
}
}
It works perfectly.
What I want to do now is to modify my .notpro class inside the btn-1:hover. As .notpro is not child or sibling with btn-1, it doesn't work.
.btn-1:hover {
.pro {
... // works
}
.notpro {
... // doesn't work
}
}
Is there a way to do this ?
Thank you !
There is no way without using javascript to affect a different non-sibling selector. But you an do it if you move the hover up one level.
You need to put the hover on the first navbar and using the direct sibling combinator (+) - target the other navbar and then inside it to get the .notpro element. Note that I added words to your elements to show the hover effect.
The only other CSS way of doing this is to put both elements inside the one navbar - then they are siblings and can be targetted.
.navbar:hover + .navbar .notpro {
color: red;
}
<div class="navbar">
<div class="btn-section btn-1">
<p class="section pro">I am a Pro</p>
</div>
</div>
<div class="navbar">
<div class="btn-section btn-2">
<p class="section notpro">I am Not a Pro</p>
</div>
</div>
I don't think this syntax is valid in CSS, meaning selector inside another selector.
You can add :hover to the 'pro' to get different behaviour than the parent div.
This question already has answers here:
Can I write a CSS selector selecting elements NOT having a certain class or attribute?
(10 answers)
Closed 3 years ago.
i want to add some style to the div elements when the div is not of some class
What i am trying to do?
i have a div with class "card". i have other elements in the div like footer, a tag and h4.
now i want to make the a, h4 tag to blue color on cursor hover.
so i do it like below,
.card a h4:hover {
color: blue;
}
But i want to add this style to those a and h4 elements when div has only card class. i dont color blue for a, h4 elements when div has "card" and "disabled" classes.
how can i do it.
below is the html code,
<div class="card">
<div class="footer">
<div class="info">
<a href="somelink">
<h4>text</h4>
</a>
</div>
</div>
</div>
Could someone help me with this. thanks.
Hope you are looking for a solution like this. Adding style to h4 tag on hover under class card and not adding any specific style for div with both card and disabled class
.card a h4:hover {
color: orange;
}
.card.disabled a h4:hover {
color: inherit;
}
<div class="card">
<div class="footer">
<div class="info">
<a href="">
<h4>Card</h4>
</a>
</div>
</div>
</div>
<div class="card disabled">
<div class="footer">
<div class="info">
<a href="">
<h4>Card Disabled</h4>
</a>
</div>
</div>
</div>
You can use the :not selector:
.card:not(.disabled) a h4 { ... }
I have the below html structure
<div class="col-md-6">
<div class="content-item">
<span>
</span>
<span>
<div>
<div> // OVerride class for this div
Override class to this div
</div>
</div>
</span>
</div>
</div>
I am looking to have a nested class which will override the style for very inner div.
The Div with comment Override class for this div should be overridden.
What is the best practice nested selector for this kind of situation.
If you are sure that the html structure will not change, you can use the below CSS to override the div.
Mind it, it WILL NOT override any inline styles given in the div.
Also, try to avoid using very large nested selectors in future.
.col-md-6>.content-item>span>div>div {
color: green;
// Your styles
}
<div class="col-md-6">
<div class="content-item">
<span>
</span>
<span>
<div>
<div>
Override class to this div
</div>
</div>
</span>
</div>
</div>
How to target a div to do a hover effect that is wrapped inside a href and all that sits inside main div like a holder? When the user hover on the item,i want for example the p element to have hover effet that it is inside div el with class item.
How to target elements like this? If it's possible to do only with css?
Something like this
<div id="ItemsEmployees">
<a href="">
<div class="itemHolder">
<div class="nameTitle">
</div>
<div class="item">
<p>I want only this div to have hover style</p>
</div>
</div>
</a>
</div>
You can use a descendant selector to select it. Here is some code:
<div id="ItemsEmployees">
<a id="anchor" href="">
<div class="itemHolder">
<div class="nameTitle"></div>
</div>
<div class="item">
<p>I want only this div to have hover style</p>
</div>
</a>
</div>
And then some CSS:
#anchor:hover .item {
/* Do stuff here */
}
What this does is select #anchor (which is link, I added an ID) and when it hovers, effects .item, which is the paragraph element.
Here's a JSBin demonstrating with font-size.
Using jquery.
$('#ItemsEmployees a').hover(function(){
$(this).css("background-color", "yellow");
})
Here div tag is parent and anchor tag is child of div tag, so all anchor tag inside the parent div tag is bindend with hover effects.
I want to use hover for a couple divs inside a tag.
For example here
<a href="#">
<div class="nextmatch_wrap">
<div class="clan12w">
<div class="TeamLogos">
<div class="Team" id="TeamContainer">
<img src="#">
</div>
</div>
</div>
<div class="clan12w">
<div class="TeamLogos">
<div class="Team" id="TeamContainer">
<img src="#">
</div>
</div>
</div>
</div>
If you hover on the a tag I want a colored border to appear on the "TeamContainer" and "TeamLogos"
I'm not good with css but I have tried like this
a nextmatch_wrap, :hover #TeamContainer, a nextmatch_wrap, :hover .r-home-team{
border:solid 1px #25c2f5;
}
It works but somehow the hover is like always ON when your mouse is on anywhere in the page but when you move your mouse out of the browser page the hover goes away, Any idea?
Your selector is not correct and the <a> tag is not closed. The > in the selector means that apply effect on <a> when it is hovered and <a> followed by <div>.
Here is what you can do.
a:hover > div {
border:solid 1px #25c2f5;
}
<a href="#">
<div class="nextmatch_wrap">
<div class="clan12w">
<div class="TeamLogos">
<div class="Team" id="TeamContainer">
<img src="http://placehold.it/100x100" />
</div>
</div>
</div>
<div class="clan12w">
<div class="TeamLogos">
<div class="Team" id="TeamContainer">
<img src="http://placehold.it/100x100" />
</div>
</div>
</div>
</div>
</a>
This is the css you need to use exactly for what you want:
a:hover #TeamContainer, a:hover .TeamLogos{
border:solid 1px #25c2f5;
}
The "," in a css's selector means that you're applying the same style to several elements and you use it to separate those elements (i.e: in my case, I'm applying that border style to every #TeamContainer located inside an <a> tag that's being hover, AND to every .TeamLogos inside an <a> tag hovered.)
You should add :hover immediately after the element that's being hovered, despite the element that's going to be affected.
The problem with your style's selector, is that you have :hover alone between commas, so that's selecting any element being hover.
Don't forget to close the <a> tag.