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>
Related
How to change CSS for the Div in the 1st line having h3 text "Example Text1"
<div class="test">
<div>
<h3> Example Text1 </h3>
</div>
</div>
<div class="test">
<div>
<h3> Example Text2 </h3>
</div>
</div>
You can't apply a CSS rule based on the contents on an element with CSS only, with the exception of the :empty selector. :contains has been a suggested selector but has not been implemented.
You will either need to use JS, or apply CSS based on the ordering of the elements you have, for example in this case you could use
.test:first-of-type h3 {
color: red;
}
To only style the first h3 tag.
You could also look into something like :contains() from jQuery if you don't mind adding a dependency.
You can't give CSS to div having a child with specific text. But you can use :first-child CSS.
.test:first-child h3 {
color: red;
}
<div class="test">
<div>
<h3> Example Text1 </h3>
</div>
</div>
<div class="test">
<div>
<h3> Example Text2 </h3>
</div>
</div>
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
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 { ... }
In my html file, I wrote the code like this,
<body class="sign-in-body">
<div class="container sign-in-container">
<div class="row">
<div class="col"> </div>
<div class="col-8">
<div class="card">
<div class="card-block">
This is some text within a card block.
</div>
</div>
</div>
<div class="col"> </div>
</div>
</div>
I want to add a margin-top: 15% to my container class. To do that I wrote,
div.container.sign-in-container {
margin-top: 15%;
}
But the problem is if I add just,
.container.sign-in-container
it works.
Why is that?
The selector .container.sign-in-container will select any element that has both container and sign-in-container classes.
But div.container.sign-in-container will select only the div elements with both of the css classes.
Since you have only a div with both classes, both of the selectors work.
You should probably read about css selectors. This is a good reference to start.
In css you add only one class for css not necessary to add div.container.sign-in-container. This is also work in one class .sign-in-container. If you want to override css then you can use parent of div.
You are using a class level CSS selector. It will work. You can have multiple kinds of selectors and combinators in CSS to target the element on your page.
With your example
div.container.sign-in-container
div.sign-in-container
div.container
.container.sign-in-container
.container
.sign-in-container
all are going to target the same div, that is why it works.
I think I'm just spacing this one out but here's the html structure. I'm trying to select the five divs nested two deep from the id'ed div in a dynamically generated page.
<div id="mydiv">
<div class="class1">
<div class="myclass">stuff</div>
<div class="myclass">stuff</div>
<div class="myclass">stuff</div>
<div class="myclass">stuff</div>
<div class="myclass">stuff</div>
</div>
</div>
I need to adjust the css of all the "myclass" divs using a css selector and my custom css overriding the dynamically generated jQuery Mobile css class.
Thanks!
You should be able to overwrite styles with this selector:
#mydiv > .class1 > .myclass { ... }