Style Every Thing Except First Child

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 trs. 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



Leave a reply



Submit