not:first-child selector
One of the versions you posted actually works for all modern browsers (where CSS selectors level 3 are supported):
div ul:not(:first-child) {
background-color: #900;
}
If you need to support legacy browsers, or if you are hindered by the :not
selector's limitation (it only accepts a simple selector as an argument) then you can use another technique:
Define a rule that has greater scope than what you intend and then "revoke" it conditionally, limiting its scope to what you do intend:
div ul {
background-color: #900; /* applies to every ul */
}
div ul:first-child {
background-color: transparent; /* limits the scope of the previous rule */
}
When limiting the scope use the default value for each CSS attribute that you are setting.
Style every thing except first child
You can only use simple selectors in :not()
, try
tr:not(:first-child)
http://jsfiddle.net/mowglisanu/Sn7Uw/
How to skip first child?
With the negation pseudo-class:
p:not(:first-child) { color: red; }
Browser support is very strong now, but alternatives include:
p { color: red; }
p:first-child { color: black; }
and:
* + p { color: red; }
before to all children except :first-child
You can use the :not
pseudo-class:
li:not(:first-child):before {
content: "|";
}
ul { display: flex; list-style: none;}li:not(:first-child):before { content: "|"; padding: 5px;}
<ul> <li>First</li> <li>Second</li> <li>Third</li> <li>Fourth</li> <li>Fifth</li></ul>
Select every element after element except first child
The :first-child
pseudo-class always refers to the first child of its parent. It cannot be used to ignore the first child (sibling) that follows the reference element.
If you want to select all elements except the first element that is following the reference element then it should be written as below:
.reference + * ~ *{
color: red;
}
The .reference
is the reference element, the + *
refers to the first sibling of the reference element and it can be of any type, the ~ *
refers to all subsequent sibling elements of any type.
In Less, you could either use the selector as-is provided above (or) you could write it like below:
.reference {
& + * ~ * {
color: red;
/* and any other rules */
}
}
The below snippet demonstrates this in working.
.reference + * ~ *{ color: red;}
<div class='reference'>Reference Element</div><p>Some other element which is the first one after reference element</p><div>The elements to be selected</div><p>The element to be selected</p>
How can I select all children of an element except the last child?
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 */ }
How do I apply css to all elements except when first child is of certain id
If you were to use jQuery you could access the element like this:
$('.content-body > :not(#container-special)').parent().css("max-width", "1050px")
Or for normal JS you could set the CSS:
.content-body {
max-width: 1050px;
}
And then remove it from the element that contains the element with that ID:
var cs = document.getElementById('container-special')
var parent = cs.parentElement
if (parent.className == 'content-body') {
parent.style.maxWidth = "initial"
}
Select all 'tr' except the first one
By adding a class to either the first tr
or the subsequent tr
s. There is no crossbrowser way of selecting the rows you want with CSS alone.
However, if you don't care about Internet Explorer 6, 7 or 8:
tr:not(:first-child) {
color: red;
}
Skip first child of top level divs only
If you are just trying to apply the style to all the div
tags where you have assigned the "a" class except the first one, then you just need a minor modification to your css.
.want-to-skip-first-a .a:not(:first-child) {
background-color: red;
}
CSS selector for other than the first child and last child
Try:
#navigation ul li:not(:first-child):not(:last-child) {
...
}
Related Topics
Div with a Transparent Cut Out Circle
CSS Changes on MVC App Not Working
How to Extend a Class from a CSS File in SASS
Centering an Image in a Paragraph
Css: Before/After Content with Title
Safari and Chrome Ignore Min-Width CSS Propery
How to Override Max-Width for Specific Div
Overflow:Hidden on Body Is Broken in iOS6
Which Screen Reader Would Be Best to Test Site Accessibility and How to Configure That
How to Remove a CSS Class from a Jqgrid Cell
Taghelpers Add Custom Class for Labeltaghelper Based on Validation Attribute [Required]
Rotating CSS Cube on Fixed Axes
How to Create a Text Watermark Without an Image
How to Have a Horizontal Multiple Colour Gradient on Text Using CSS3/HTML 5
Removing Page Scrollbars in IE8 (Overflow:Hidden Not Working)