I need change a color for this element
<div class="box download">
<div class="box-inner-block">
Plugin Windows
</div>
</div>
I call a from CSS with:
.download.box-inner-block a {
color: white!important;
}
But it does not work, why? I need this color only for the element in .box-inner-block inside .download.
Is this what you are looking for as understood in your question ?
If so you need to carefully watch how you indent and construct your css.
As you can see in my snippet I added a space between:
.download .box-inner-block a
in order to make that work.
You can also remove !important from you css as it will not be useful in that case. If you need it, don't forget to add a space bewtween white and !important
.download {
background-color: black;
}
.download .box-inner-block a {
color: white;
}
<div class="box download">
<div class="box-inner-block">
Plugin Windows
</div>
</div>
You are using the wrong selector, as .download.box-inner-block selects elements which has both download AND box-inner-block classes.
<div class="download box-inner-block"/>
To target nested elements, leave a space between the two class selectors. So the correct selector in your case is:
.download .box-inner-block a {
color: white;
}
In this case you can drop !important too.
Related
I just wanted to know when is neccessary for me to place a div.cssclass when using two css classes together in my stylesheet. I normally troubleshoot by using with and without it until it works which obviously is fine and quick enough but I would be good to know the best practice.
Example:
.cssclass1 .cssclass2 { }
VS
.cssclass1 div.cssclass2 { }
Is it when its not a direct sibling to it, i.e the next class nested in there?
If both those elements are divs, then there is no difference, except that
.cssclass1 .cssclass2 {
is faster than
.cssclass1 div.cssclass2 {
If you'd have let's say:
<div class="cssclass1">
<div class="cssclass2"></div>
<a class="cssclass2"></a>
</div>
then .cssclass1 .cssclass2 { would select both div and a, while .cssclass1 div.cssclass2 { would select only the div.
The difference is Specificity because if you have .cssclass1 .cssclass2, all elements with that classes are affected BUT if you use .cssclass1 div.cssclass2, the only affected is the <div> element with the cssclass2 class.
As Jonjie said, it's about specificity. Here's an example...
div .cssclass2 {
background-color: green;
}
.cssclass1 div {
background-color: blue;
}
div div {
background-color: orange;
}
<div class="cssclass1">
<div class="cssclass2">
hello
</div>
</div>
As you can see, none of the styling declarations are an exact match for our html here. So, what colour should the background be? CSS has a way to resolve this ambiguity by identifying the css that is most specific to the html. There are some good blog posts about understanding CSS specificity.
As far as I can tell, this simple example below should be working but it doesn't. I'm obviously missing something, but I can't for the life of me figure it out.
The first .field div should have red text, but it simply does not...
Running Chrome browser on Mac.
http://codepen.io/anon/pen/obbmjd
p .field:first-child {
color: red;
}
<p>
<div class="field">first - should be red</div>
<div class="field">second</div>
</p>
The HTML is invalid.
A p element can't contain a div element. This results in the following:
<p></p>
<div class="field">first - should be red</div>
<div class="field">second</div>
<p></p>
As you can see, the browser is automatically closing the p tags, which explains why your selector isn't matching anything.
If the HTML was actually valid, then your selector would work. For instance, if you replace the div elements with span elements, the following would work:
Updated Example
p .field:first-child {
color: #f00;
}
try
.field:first-child {
color: red;
}
I know that a * prefix before a style name like *border-top-width:0; is a hack for IE browsers. However, I am unable to understand this. When * is used as suffix as shown below what does it mean ??
.ancestors *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
I observed that when star mark is present, the style is getting applied in chrome browser and when star mark is removed , the styles are not getting applied in chrome browser.
The * (Asterisk) symbol in a CSS file, when used after a class name, or any other identifier, will select all descendants/children inside that element.
For example, if we have this HTML document:
<div class="container">
<div class="square">
<div class="square">
</div>
<div class="container">
<div class="circle">
<div class="circle">
</div>
To select just the .container divs, the following CSS can be used:
.container
{
/*Styling*/
}
To select just the .square inside the .containers then use:
.container .square
{
/*Styling for squares*/
}
To select all the elements that are inside the .containers then use:
.container *
{
/*Styling for squares, circles, rectangles and everything else you can think off*/
}
For further information, see the W3C reference on the Universal Selector:
http://www.w3.org/TR/selectors/#universal-selector
And also the Mozilla Dev Network:
https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors
When star(*) is placed after the a class name it will select all its children.
From MDN:
An Asterisk (*) is the universal selector for CSS. It matches a single
element of any type. Omitting the asterisk with simple selectors has
the same effect. For instance, *.warning and .warning are considered
equal.
Like in many other places, the asterisk is a wildcard that selects every element. When used after a class name (like in your example), every element that is a descendent of the ancestor class will have the styles applied.
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>
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.