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 }
Related
Need a guidance from CSS pro. how can i get the expected result. Appreciated for any help.
What i've tried so far : JsFiddle Demo
Simply give your <li> elements a margin. For example:
ul li {
margin: 0 0 10px;
}
To avoid extra spaces below the list you can remove the last margin with the last-of-type psuedo selector:
li:last-of-type {
margin-bottom: 0;
}
Assuming that you are content with the static fixed-width layout, you can also force the widths of all list items with:
ul li {
width: 145px;
}
Here your adjusted fiddle.
For further reference see the tutorials at w3cschools. Specifically for the CSS width and margin properties, and the last-of-type psuedo selector.
How would I select all but the last child using CSS3 selectors?
For example, to get only the last child would be div:nth-last-child(1).
You can use the negation pseudo-class :not() against the :last-child pseudo-class. Being introduced CSS Selectors Level 3, it doesn't work in IE8 or below:
:not(:last-child) { /* styles */ }
Make it simple:
You can apply your style to all the div and re-initialize the last one with :last-child:
for example in CSS:
.yourclass{
border: 1px solid blue;
}
.yourclass:last-child{
border: 0;
}
or in SCSS:
.yourclass{
border: 1px solid rgba(255, 255, 255, 1);
&:last-child{
border: 0;
}
}
easy to read/remember
fast to execute
browser compatible (IE9+ since it's still CSS3)
Nick Craver's solution works but you can also use this:
:nth-last-child(n+2) { /* Your code here */ }
Chris Coyier of CSS Tricks made a nice :nth tester for this.
When IE9 comes, it will be easier. A lot of the time though, you can switch the problem to one requiring :first-child and style the opposite side of the element (IE7+).
Using nick craver's solution with selectivizr allows for a cross browser solution (IE6+)
There is a:not selector in css3. Use :not() with :last-child inside to select all children except last one. For example, to select all li in ul except last li, use following code.
ul li:not(:last-child){ }
If you're using it within the nesting of the parent then the easiest way is:
&:not(:last-child){
....
}
Example:
.row { //parent
...
...
...
&:not(:last-child){
....
}
}
Using a more generic selector, you can achieve this as seen below
& > *:not(:last-child) {/* styles here */}
Example
<div class="parent">
<div>Child one</div>
<div>Child two</div>
</div>
This will capture all the child DIV in the parent
to find elements from last, use
<style>
ul li:not(:last-child){ color:#a94442}
</style>
Nick Craver's solution gave me what I needed but to make it explicit for those using CSS-in-JS:
const styles = {
yourClass: {
/* Styles for all elements with this class */
'&:not(:last-child)': {
/* Styles for all EXCEPT the last element with this class */
},
},
};
.nav-menu li:not(:last-child){
// write some style here
}
this code should apply the style to all except the last child
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 want to make my entire div a link like the a tag. Of course this may be possible with js, but I'm interested in seeing if this is possible to do with only css.
I have this:
#my_div {
width: 200px;
background-color: #090;
}
#my_div:hover {
background-color: #0f0;
}
Where the page structure is:
<div id="my_div">link</div>
You can make inline elements act as block level elements by setting their display property to block:
/* Make all a tags that are decedents of the
element with an id of `my_div` be displayed as block level elements */
#my_div a {
display: block;
width: 200px;
height: 100px;
text-align: center;
background-color: #090;
}
/* Handle the color change on hover */
#my_div a:hover { background-color: #0f0; }
You don't actually need the wrapping div - you can just target the particular a tag directly if you give it a class or id.
You can't make an element with CSS, but you can wrap your div with an a tag instead. It would look like this:
<div id="my_div"></div>
That makes the entire div a link to whatever your href is.
CSS3 does have the content property now, but I don't think you can put raw HTML into it. That would be pretty bad security wise if anyone had access to your .css files...
Anyways, I think the above solution is the simplest way to achieve what you asked.
Try this:
#my_div a {
display: block;
width: 100%;
}
You need to set your pseude class to the a tag not to the div:
#my_div a:hover {
background-color: #0f0;
}
That should do it's work :-)
I think you should check out this question that was posted to stack overflow.
Make a div into a link
It was the first result on Google for how to make a div a link.
Please:
HTML adds structure to content (e.g. chapters of a book, what is emphasized ...)
CSS adds what colors/fonts/placement for those items
Javascript adds makes it interactive.
You weren't clear whether you meant without "a href" or without using the "<a" tag.
If, on the offchance you meant the latter, the only other way I can think to make something clickable go someplace is to make it a form submit button.
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