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
Related
Ok, first off I want you all to know that I have tried using the <span></span> tag (though maybe incorrectly).
Is there something I'm doing wrong with the <span></span> tag? Or is there something I need to do differently altogether?
Here is my current code to create a space without <br></br>:
#beforeImage span {
padding: 40px;
}
<span id="beforeImage">text</span>
2 things to fix:
you were applying the CSS to span of an ID selector, but you were using a span with an ID selector in your HTML.
span won't have padding because it is an inline element by default, so set inline-block or block
Snippet
#beforeImage {
padding: 40px;
display: inline-block; /* or block */
/* demo */
background: red
}
<span id="beforeImage">Foo bar</span>
<span> is by default an inline element and will not be sized nor accept vertical padding without resetting its display to inline-block ( or else but inline).
You might look for:
span{
display:inline-block;
padding: 40px;
}
beside, br could still be used
br {
line-height:3em;
vertical-align:top;/* debug FF/IE */
}
http://codepen.io/anon/pen/GoVdYY
But, do you really need an extra tag, could you not apply a bottom margin or padding to another element ?
Can simply target the Id of the span:
#beforeImage{
display:inline-block;
padding: 40px;
}
Or all spans:
span{
display:inline-block;
padding: 40px;
}
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.
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/
How do I delete the background of my last DIV using class="item"?
Parent is: <div id="lastQuestions"></div>
jsfiddle
.item:last-child {
background-color: inherit;
}
Use pseudo element last-child
Here is a working jsfiddle
Alternatively, you could use a different html tag (like span, p or li displayed as block) for the.item elements instead of div to differentiate them from other div elements, and then you can do something like:
#lastQuestions li:last-of-type {
background: none;
}
to select it.
quick illustration
Edit:
Since, according to your jsfiddle, only .item elements are of type div in your code they already differ in type from all other children of #lastQuestions. So you can just try this:
#lastQuestions > div:last-of-type {
background: none;
}
DEMO
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 }