I would like make all text within div.main gray except for all content within the child div.exception. div.exception should appear as if class main was never added to the parent div.
Is this possible? If so, how? Thanks!
<style type="text/css">
.main{color: gray;}
.hello{color: red;}
</style>
<div class="main">
<div>
<div class="exception"><p class="hello">Hello</p><a>Link</a></div>
</div>
<div><p>Howdy</p></div>
<div><a>Link</a></div>
</div>
for modern browser, just apply the rules to every div but .exception
.main div:not(.exception) p {
/* style for very nested div not exception */
}
otherwise override the rules later (as suggested by #jacktheripper)
This is simply done by:
.main .exception {
your styling here (e.g. color: black)
}
See this jsFiddle example
You cannot use color: inherit as this selects only the immediate parent, when you want to select two parents above. Therefore you have to override the colour 'manually'
#F. Calderan's answer is an alternative, but browser support is variable
No, that's not possible.
You can easily override the style so that it appears not to have been colored gray, but then you have to know what the original color was:
.main .exception { color: black; }
If you would set the style on the inner elements directly intead of on the main element, and set the exception class on the same level, you could override it using inheit:
<style type="text/css">
.main div { color: gray; }
.main div.exception { color: inherit; }
.hello { color: red; }
</style>
<div class="main">
<div class="exception">
<div><p class="hello">Hello</p><a>Link</a></div>
</div>
<div><p>Howdy</p></div>
<div><a>Link</a></div>
</div>
Related
I have an accordion like control in which an item will be expanded and another will be collapsed. I have a common background color (which differs for various themes ) and a different hover color for all headers.
I need to maintain the background color for active item which is expanded and hover color need not to be applied for this item alone.
I have a class to identify this and I apply a certain background through hover selector
CSS
.e-active:hover {
background: #f00;
}
I tried with transparent and none but it changes the background to white
This is hard coded CSS but I need a generic CSS such that the existing background color will be maintained for active h3 element on hover state for any theme
You can use the :not css selector
div {
background: green;
padding: 2px 20px;
color: #ffffff;
}
h3 {
background: blue;
padding: 6px;
}
h3:not(.e-active):hover {
background: red;
}
<div>
<h3 class="e-active">Heading 1</h3>
<h3>Heading 2</h3>
<h3>Heading 3</h3>
</div>
You're probably going to need to include some form of JavaScript/jQuery to implement this dynamically (although I am certain you could use SASS/SCSS to achieve this dynamically as well).
The main focus of the script would be to check if the heading has the .e-active and not apply the .hover class in that instance. Once that's down, you can simply change :hover to .hover.
Here is an example - run the code snippet to see it work:
$('h1').mouseenter(function(){
if(!$(this).hasClass('e-active')) { //if heading does NOT have e-active class, apply hover effect
$(this).addClass('hover');
}
});
$('h1').mouseleave(function(){
$(this).removeClass('hover');
});
h1 {
background-color: salmon;
}
h1.hover {
background-color: teal;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Non active Heading 1</h1>
<h1 class="e-active">Active Heading 2</h1>
<h1>Non active Heading 3</h1>
EDIT:
Bhuwans answer that shows the use of the :not selector is a much cleaner way of achieving that - I would suggest using that route first whenever possible.
I have two situations:
<div class="parent">
<div class="content">TEXT</div>
</div>
or
<div class="content">TEXT</div>
I want to change text color if class parent is present or not.
I write this css but it doesn't work:
div:not(.parent) > .content{
color: blue;
}
How can I solve it?
It doesn't work because in the second example you have no div element wrapping the content so div:not(.parent) is not matched (.content is a direct child of the body element)
Either you write
:not(.parent) > .content {
color: blue;
}
(without defining the element) or just reverse your logic: give a basic style for .content in case there's no parent element and override the style if the .parent exists:
.content {
color: blue; /* no .parent */
}
.parent > .content{
color: inherit;
}
Why is the computed font-size 22.08px(1.38em) rather than 16px?
.stec {
font-size: 16px !important;
}
#content p {
font-size: 1.38em; /* why does this override !important? */
}
<div id="content">
<div class="stec">
<p>some paragraph text</p>
</div>
</div>
16px is !important but it's not being applied. Here's the computed style window from the Chrome debugger:
Inherited styles have a very low precedence. From the MDN:
Styles for a directly targeted element will always take precedence over inherited styles, regardless of the specificity of the inherited rule.
So, that's your problem; .stec and #content p don't target the same elements. #content p overrides the style inherited from .stec.
Consider the following example. You might expect the paragraph text to be red, inherited from its div parent... but it's not:
div {
color: red !important;
}
p {
color: blue;
}
<div> <!-- !important is applied here -->
This text is red.
<p>Were you expecting this text to be red too?</p> <!-- not here -->
</div>
It's also not about specificity, as others have mistakenly suggested. It's about whether the rule actually targets the appropriate element. Consider the following example:
p {
color: red !important;
}
#test {
/* this is the more specific selector, yet it's overridden by !important */
color: blue;
}
<p>red</p>
<p id="test">were you expecting blue?</p>
p and #test both apply directly to the second paragraph; so, there's an opportunity for !important to override something.
What I mean to say with this is, if I have a page with two divs, and I want each div to have a separate style, what way would I go about this?
Example:
div{ background: red;} // apply this style to one div.
div{ background: blue;} //apply this style to another div.
I realize it would be possible to just add a class to each div, but what if I expand it? What if I want a whole section of my page with a lot of different attributes to use one part of the stylesheet, and another whole section to use another part?
You can simply prefix the CSS rules with the ID or class of the section. For example:
#section1 h1 {
color: red;
}
#section2 h1 {
color: blue;
}
and basically prefix every rule with either #section1 or #section2 depending on the containing section.
As far as I understand it you want for example every div in your header to be green while every div in your footer is supposed to be red.
#header div{ background-color: green; }
And than
<div id="header">
<div>I'm green</div>
</div>
You can also use more complex selectors to helpt you solve special cases, take this example:
#header div{ background-color: red; }
#header > div{ background-color: green; }
And than
<div id="header">
<div>
I'm green...
<div>...and I'm red</div>
</div>
</div>
Microsoft has a great overview of what selectors are available. There examples are sometimes a little weak but its something.
You can do this:
.firstSectionType div{ background: red;} // apply this style to one div.
.firstSectionType span { color: blue; }
.secondSectionType div{ background: blue;} //apply this style to another div.
.secondSectionType span {color: red; }
Then if your HTML looks like this:
<div class="firstSectionType">
<p><span>Hello</span></p>
<div>This has a red background and <span>this is blue text</span></div>
</div>
<div class="secondSectionType">
<p><span>Hello</span></p>
<div>This has a blue background and <span>this is red text</span></div>
</div>
the divs and spans in the corresponding secions will be formatted accordingly.
The CSS above requires you to repeat .firstSectionType or .secondSectionType in each rule, but a CSS preprocessor like LESS will allow you to rewrite it like:
.firstSectionType
{
div{ background: red;} // apply this style to one div.
span { color: blue; }
}
.secondSectionType
{
div{ background: blue;} //apply this style to another div.
span {color: red; }
}
I have a row of divs with :hover and it is working when I hover over the images within the divs. However, it doesn't want to work for the text. I am on the newer side of html and css, so help appreciated. I must be missing something obvious?
The first one with the div.topIconsHover:hover CSS works. The other does not. I have tried applying the topIconsHover class to the div as well and it still doesn't work. So, I must be doing something wrong with the HTML? But I'm just not sure what. Help appreciated! Thanks.
Note: I have the CSS in an external sheet.
div.topIconsHover:hover {
background-color:#555555;
}
<div class="topIcons topIconsHover">
<img src="tools16lg.png" />
</div>
div.topTextHover:hover {
background-color:#555555;
color:#ffffff
}
<div id="topBrowse" class="topTextHover">
Browse
</div>
The color attribute is working only with text elements, not divs. So you should apply the class tag to your href tag like this :
<style type="text/css">
.topTextHover:hover {
background-color:#555555;
color:#ffffff
}
</style>
<div id="topBrowse">
Browse
</div>
EDIT :
If you're looking to define a base class for the link itself, and a HOVER state, do it like this :
<style type="text/css">
.topTextHover {
background-color: transparent;
color: #0000ff;
}
.topTextHover:hover {
background-color: #555555;
color: #ffffff;
}
</style>
<div id="topBrowse">
Browse
</div>
Good luck
You applied style to the ":hover text" but not for links. This should do the trick (not tested):
div.topIconsHover:hover {
background-color:#555555;
}
<div class="topIcons topIconsHover">
<img src="tools16lg.png" />
</div>
div.topTextHover:hover, div.topTextHover:hover a {
background-color:#555555;
color:#ffffff
}
<div id="topBrowse" class="topTextHover">
Browse
</div>
Anchor tags have a default text colour which gets priority (usually blue). What you need is to define this explicitly:
div.topIconsHover:hover {
background-color: #555555;
}
div.topTextHover:hover {
background-color: #555555;
}
div.topTextHover:hover a {
color: #ffffff
}
There are two really simple ways to resolve this issue.
First if you don't have any height/width requirements on the anchor tag (<a href=''></a>) being inside the div do the following:
.topTextHover a:hover{
background-color:#555555;
color:#ffffff
}
<div id="topBrowse" class="topTextHover">
Browse
</div>
If you do have spacial requirements for the text inside the div (i.e. you want the text to be vertically-aligned to the center and horizontally centered) then I would do the following note* this is backwards compatible but is really only compliant with CSS3
#BrowseLink:hover {
background-color:#555555;
color:#ffffff
}
<a id="BrowseLink" href="browse.html">
<div id="topBrowse" class="topTextHover">
Browse
</div>
</a>
Also of note IE6 doesn't like the pseudo-class hover on anything other than an anchor tag and therefor will not work properly. This may be applicable in other browsers as well but the main one that I know that has issues is IE6 of the browsers that are typically seen on a website.