I am trying to apply styling to a specific element using CSS.
The HTML for the element looks like the following:
<div class="wrapper red-background ">
content here
</div>
Im trying to select and style this element using the following CSS:
.wrapper .red-background {
float:right !important;
width:230px !important;
padding-right:20px !important;
padding-top:0px !important;
};
However it does not seem to pick it up at all, I cant figure out what i am doing wrong. The styling is not being overwritten, its just not being applied in the first place. Any suggestions would be much appreciated!
Your selector is incorrect.
A space between class names in a selector indicates that you are trying to select a descendant of the original class.
So .a .b indicates you are trying to select the div with a class of b inside a div with a class ofa`.
<div class="a">
<div class="b"></div>
</div>
For elements with multiple classes, one merely chain the classes. So for this..
<div class="a b">
</div>
You need .a.b
Therefore...
For this HTML
<div class="wrapper red-background ">
content here
</div>
The selector would be without a space.
.wrapper.red-background {
float:right !important;
width:230px !important;
padding-right:20px !important;
padding-top:0px !important;
}
When creating a definition that is to match two or more classes on one element, do not include a space.
.wrapper.red-background
What you've provided would look for a .red-background inside a .wrapper
This may help you to understand CSS selectors: http://www.w3schools.com/cssref/css_selectors.asp
.wrapper.red-background {
float:right !important;
width:230px !important;
padding-right:20px !important;
padding-top:0px !important;
};
If you seperate the two classes, the last one is a child element. You need to combine them like above: without spaces. So only elements with BOTH classes will be styled.
don't give space in css class
.wrapper.red-background {
float:right !important;
width:230px !important;
padding-right:20px !important;
padding-top:0px !important;
}
Lose the space between classes in the CSS:
.wrapper.red-background {
...
}
.wrapper {
float: right;
width: 230px;
padding-right: 20px;
padding-top: 0px;
}
You'll want to remove the ; from after the closing }
Also
You don't need the !importants unless you're trying to override something written in the css below. (edit, I had originally written 'above')
Does the target div need to contain both wrapper and red-background classes? Or just one of the two? The above css assumes just one of the two while others have answered assuming the obvious, that both are a requirement.
Related
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/
Suppose I have the following HTML:
<div id="Wrapper">
<div class="MyClass"></div>
<div class="MyClass"></div>
<div class="MyClass"></div>
<div class="MyClass"></div>
<div class="MyClass"></div>
</div>
and the following CSS:
.MyClass {
float: left;
margin-right: 5px;
}
All these elements are going to be positioned on one line with a space in between of 5px. The problem is that there will also be a space of 5px at the end. I want to have Wrapper really wrap the .MyClass divs so that there's no space on the edge.
Now I can think of several ways of doing this:
with jquery, set the right margin of the last element to 0.
with CSS create a new class - .MyClassForLastElement with marin-right set to 0.
creating a negative right-margin of -5px for .Wrapper.
I was wondering if there's an elegant and clever way of doing it.
Not sure if there is a perfect solution, I use to do that:
.MyClass {
float: left;
margin-left: 5px;
}
.MyClass:first-child {
margin-left: 0;
}
I do it with with first-child since it is supported in IE6-7 while last-child is not.
If you don't want the last child to have a margin-right use the last-child psuedo-selector.
.MyClass:last-child {
margin-right: 0px;
}
The following rules would provide the desired effect. First element will have no margin, but effectively any consecutive element would have margin-left:5px;.
.MyClass {
float: left;
margin: 0;
}
.MyClass + .MyClass {
margin-left: 5px;
}
Well supported across browsers, IE7+
the + adjacent selector matches an element that is a next sibling of another element, in the example above it's a .MyClass element following another .MyClass element
selectors as like this one
.MyClass + .MyClass {
margin-left: 5px;
}
More info http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors
I checked this post (How to style the first and last li with CSS or jQuery?) but am still seeking a suitable IE8(and pre IE8) solution.
I have a row of DIVs that are set to have a padding-right, but in order for the final one to align properly want the final DIV to have zero padding. I've used the .css + .css route before but that doesn't appear to work in IE8 and versions before it.
Any help would be appreciated.
Assuming there's a containing div wrapping all of these, you should be able to do this:
div.container {
background-color: blue;
}
div.container .div-row {
float: left;
padding-right: 5px;
}
div.container .div-row:last-child {
padding-right: 0px;
}
You can give a class to last div and get it working with that class in IE.
<div class="last"></div>
<style>
.last
{
padding-right:0;
}
</style>
You can use something like the following CSS:
.rowofdivs div:last-child {
padding-right: 0;
}
You can user css pseudo-class :last-of-type
This is a CSS3 selector, see quirks mode for a list of whats available to what browsers.
Why don't you add a class="last" to last div in code?
last-child is not available for IE8 and less
If you cannot manually add the "last" class as suggested in other answers, you will have to rely on JavaScript to accomplish this. If you have jQuery, you can do something like this:
$('#parentdiv div:last-child').addClass('last');
Then adjust your stylesheet accordingly:
.last { padding-right: 0 }