Our problem is like this.
We have piece of code like this.
<div class="parent">
<div class="child">
Item 1
</div>
<div class="child">
Item 2
</div>
<div class="child">
Item 3
</div>
<div class="child">
Item 4
</div>
<div class="clear">
</div>
</div>
This is all in global container with class .content.
CSS code:
.content a
{
font-size: 11px;
}
.parent a
{
font-size: 16px;
}
For some reason, instead of applying .parent a, browsers are applying .content a.
What is wrong and how come container CSS is applied instead of closer .parent a CSS?
Both rules have the same specificity, so whichever rule comes last in the style declarations will win... Are you sure that the .parent a-rule is specified after the .content a-rule?
Another way to solve it would be to increase the specificity slightly, i.e:
.parent .child_item {
font-size: 16px;
}
Edit: You can play around with your test case here: http://jsfiddle.net/gburw/
To prove my point, try switching the CSS-declarations and you will see that whichever rule is defined last will "win".
Edit 2: You can read more about CSS specificity here. It's a pretty simple concept to grasp, the hard part is avoiding specificity wars with fellow developers =) So you should come up with a standard way you write CSS in your company. Following the guidelines of Pagespeed and YSlow is also always a good idea.
Or if you really want .parent a to be applied. You can do this:
.parent a{
font-size:16px !important;
}
that will give it more weight than .content a regardless of which was declared last.
Sounds like an issue of CSS Specificity. Check to make sure that your CSS selectors are actually:
.content a
{
font-size: 11px;
}
.parent a
{
font-size: 16px;
}
and not someting like #container .content a. You could also increase the specificity of .parent a to .parent .child a if that's not the case.
Related
I'm supposed to be removing images of graffiti off of a wall. The exercise is supposed to help teach me how to use selectors in different ways. The tricky bit is that I am competing with a second style sheet and I am trying to make a new style sheet to remove the images of graffiti.
This is the relevant code I am working with:
<div id="wall">
<div class="parent">
<div></div>
<div>
<div id="tag-6"></div>
</div>
</div>
So what I need to do is select
<div id="tag-6"></div>
I understand that I am selecting a great grandchild of <div id="wall"> I even understand that it is not the first child but everything I have tried so far does not work.
This is what my CSS looks like:
#wall .parent > div > div {
display: none;
}
I also looked up the solution to this problem and it looked like this:
body div#wall div.parent div:last-child div#tag-6 {
display: none;
}
Yet when I copied and pasted this CSS code into my stylesheet, it did not work. Can anyone help me out?
if it has an ID, you don't need any combined selectors, just use #tag-6 as a selector
#tag-6 { display: none; }
Addition after edit of question:
Just make sure your own stylesheet is referenced after the stylesheet whose styles you want to overrule.
Try:
#wall .parent > div #tag-6 {
display: none;
}
The most obvious method is the direct route:
#tag-6 {
display: none;
}
You have a typo
<div id="wall>
should be
<div id="wall">
I am making a theme for a website, but I ran into a problem. I can't change their HTML or use javascript, only CSS.
This is what the site's HTML looks like:
<div class="container">
<div style="margin:a ridiculously massive number">
<p id="title"> Title of page </p>
<p> Words that cannot be read because of the ridiculous margin </p>
</div>
<div id="otherContent"> There a lot of divs without ridiculous margin all with different ids </div>
</div>
I want to remove the ridculous margin without affecting the other divs margins. Is this possible?
yes you can target the div that is the first-child inside of .container as to not effect other divs.
.container div:first-child{
//code
}
EXAMPLE 1
Example 1 is specifically for the example you posted where the div you would like to target is the first child of it's parent. Also note if the margin is inline like your example you're going to have to over-ride it with !important like so:
.container div:first-child{
margin: 0 !important;
}
OR
You could also use the :not selector if the other's have a similar class
.container div:not(.classname) {
//code
}
EXAMPLE 2
The point of example 2 is if your div isn't the first child and the only without a class (it would probably be unlikely you would have multiple divs with the same classname except one but it's possible). in your example you could also use :not() to target that other div with id #otherContent like so:
.container div:not(#otherContent) {
//code
}
OR
The last option you can use if the others don't apply would be nth-of-type() to target specifically which one you want to effect:
.container div:nth-of-type(2) {
//code
}
EXAMPLE 3
In this case you will have to use first-child selector with !important keyword, as this is the only way to make rule more specific than style="margin" rule:
.container > div:first-child {
margin: 0 !important;
}
If all the other divs have ID you can use the following:
div>div:not([id]) {
margin: 0 !important;
}
I write a html element as below ::
<div class="box"> Foo box </div>
and write css like
.box {
width: 400px;
height: 40px;
color: red;
text-align: center;
}
or
div.box {
width: 400px;
height: 40px;
color: red;
text-align: center;
}
I want to ask that how the both css for box class is different than each other.
The difference is that in the first class you tell that all element (div, p, span ...) with class box have that attribute.
Like this:
<span class="box">test</span>
<div class="box">test</div>
<p class="box">test</p>
The second class means that only div with class box has that attribute
Only this elements get second class:
<div class="box">test</div>
The selector before the class specify which type of elements can take this class
One very important difference between div.box and simply .box is in something called selector specificity. It is a set of rules which defines which selector gets more weight once the browser starts going through all the selectors that potentially have influence on a particular element.
What this means is easily demonstrated in the following example (DEMO)
We have a simple div containing some text.
<div class="box">
Zarro boogs found!
</div>
Now we add some CSS selectors to the example.
div.box {
padding:0.8em;
background: #bd0000;
color: #fff;
}
.box {
color: #bd0000;
}
One of the most basic rules of CSS is that selectors can be redefined in a way that whatever definition comes last and has influence on a particular element its the one that is going to be used (the sole exception being when using !important which always takes precedence).
Now in the above example redefining the .box class selector should actually hide the text but instead its still visible. How is that possible if we said that latter rules always take precedence? Its because the div.box rule has a higher specificity that .box since it actually gets points for containing both an element (div) and a class selector (.box) in its selector declaration (div.box).
Of course the div.box rule will be applied only on a div element but since class selectors are often reusable pieces of code there is plenty of situations when they are used on divs.
Although the rules in the official W3 specification are not that hard to understand they are sometimes pretty hard to remember. That's why I would like to recommend an excellent article on CSS selector specificity which can be found here.
In my opinion selector specificity is by far the most important thing to master when it comes to tracing inheritance problems with CSS stylesheets.
.box means any element having class box.
Example:
<div class="box">...</div>
<section class="box">...</section>
<span class="box">...</span>
div.box means only div element having class box.
Example:
<div class="box">...</div>
I'm trying to set the background color of the first div with the class offer. I thought .offer:first-child would do the trick, but that isn't working.
I've also tried using :nth-child(1), but that's not working either.
Any suggestions is greatly appreciated.
My fiddle: http://jsfiddle.net/MNQar/
CSS
.offer:first-child { background-color: indianred; }
.special-offers .title,
.special-offers .offer,
.special-offers .more {
height: 200px;
}
[class*="column"] {
display: inline;
float: left;
margin: 0;
}
.column2 { width: 190px;}
.column3 { width: 285px;}
HTML
<div class="row row-spacer special-offers">
<div class="column2 title">
<h2>Offers</h2>
</div>
<div class="column3 offer padding">
<div class="date">10. June</div>
<h3>Høyer tømmer lageret!</h3>
</div>
<div class="column3 offer padding">
<div class="date">10. June</div>
<h3>Super salg hos Vivikes</h3>
</div>
<div class="column1 more">
<div class="caret"></div>
More offers
</div>
</div>
.offer:first-child means "An element With the class 'offer' that is the first child beneath its parent", not "the first child with class 'offer'".
I believe you have to re-think how you do this. For example, stick a separate class to the first child or something, then use a selector like .offer.highlight.
CSS Only
This should work:
.offer { background-color: #ccc; }
.offer ~ .offer {background-color: transparent; }
It first sets all .offer elements to have a background color, then uses the sibling selector (~) to undo it for all subsequent .offer elements. Kind of a hack but it should be okay if you're not willing to use javascript. See here for a much more complete explanation: CSS selector for first element with class
And here's a fiddle: http://jsfiddle.net/MNQar/4/
JS
Alternatively, this is really easy to do with Javascript: $(".offer").eq(0).css("background-color","#ccc");
Fiddle: http://jsfiddle.net/MNQar/6/
The problem is that there is a div that precedes the first offer, making it the second element, not the first. The best solution is to give the first offer a different class, offer-first and use that. If that's not possible and the first offer is always the second child, you can use :nth-child(2)
Using :nth-child(2)
http://jsfiddle.net/MNQar/3/
I have a hierarchy as follows:
<div class="outer">
<h1>Heading</h1>
<p>Paragraph</p>
<p><a>Link</a></p>
<div class="inner">
<h1>Heading</h1>
<p>Paragraph</p>
<p><a>Link</a></p>
</div>
</div>
I want the elements within the outer div to be styled in a certain way, and the elements within the inner div to be styled in another.
However, I don't want to have to pollute my rules for inner elements with resets for every property the outer rules defined.
In the following example, I want to avoid margin: 0px. Note that, of course, my stylesheet is much more complex and resets would be significantly more numerous and annoying.
outer a { margin: 5px; }
inner a { margin: 0px; color: orange; }
My initial reflex is to use the direct child selector >, but that becomes cumbersome for, say, links, strong, spans, etc.
The following example:
outer > a { color: orange; }
Would not style:
<div class="outer"><p><a>Link</a></p></div>
<div class="outer"><strong><a>Link</a></strong></div>
<div class="outer"><ul><li><a>Link</a></li></ul></div>
<div class="outer"><table><tr><td><a>Link</a></td></tr></table></div>
...
I need to find some other way of either
Breaking the hierarchy at inner, without explicitly defining resets.
Limiting the scope of the outer styles to stop at inner.
Is this possible?
Note that rearranging my HTML structure is not possible in the present case.
Is CSS3 selectors an option for you? if yes, may this trick helps:
CSS:
.outer>:not(div) a { color: orange; }
EDIT:
.outer > a, .outer > :not(.inner) a { color: orange; }
jsBin demo
you can use the :not selector:
.outer > *:not(.inner) *