Not:First-Child Selector

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.

:not(:first-child) and :not(:first-of-type) not working

That's because they are not siblings.

If you change the :not selector to the parent div, it will work.

.someContainer:not(:first-of-type)
{
margin-top: 50px;
}

#someDivID{    width: 400px;}
#someItem,#someItem2{ border: 1px solid #000; padding: 1px; margin-bottom: 2px; clear: both; overflow: auto;}
.someContainer{ background-color: #0077FF;}
.someContainer:not(:first-of-type){ margin-top: 50px;}
<div id="someDivID">    <div class="theBody">        <div class="someContainer">            <div id="someItem" class="someItemClass">                Test            </div>        </div>        <div class="someContainer">            <div id="someItem2" class="someItemClass">                Test2            </div>        </div>    </div></div>

How to use css first-child with :not()

Try #cooldiv .row:not(:first-child). It seems you missed : before first-child. Maybe that's why it doesn't function?

CSS: is not a first child selector possible?

Yes, using :not(:first-child)

parent child:not(:first-child) { /* style */ }

Example:

div span:not(:first-child) {    color: red;}
<div>    <span>A</span>    <span>B</span>    <span>C</span></div>

Combine :not() and :first-child() selectors

This is a tricky question : I don't think there's a simple way to achieve that :)

As far as I understand : you try to select the first .image element, as long as it's not a .mobileOnly element ?

#holder .image:first-child {
border: 5px solid #0a85d4;
}
#holder .image.mobileOnly:first-child {
border: none;
}
#holder .image.mobileOnly:first-child + .image {
border: 5px solid #0a85d4;
}

Live example : http://codepen.io/enguerranws/pen/wMWzBr

Let's explain this : you were trying to select the first child of type .image, which as class .onlyMobile > this couldn't work, because in the case you need, .image wasn't the first child of its type.

CSS select element with class, only if it is NOT first child of parent

Using the :not and :first-child selectors should do it.

.special:not(:first-child) {}

Style every thing except first child

You can only use simple selectors in :not(), try

tr:not(:first-child)

http://jsfiddle.net/mowglisanu/Sn7Uw/

CSS how to use pseudo-class :not with :nth-child

:not(:nth-child(4n)) will get you anything that isn't :nth-child(4n), i.e. anything that isn't the 4th, 8th and so on. It won't exclude the 2nd child because 2 isn't a multiple of 4.

To exclude the 2nd and 4th you need either one of:

  • td:not(:nth-child(2n)) if you have fewer than 6 columns, or

  • td:not(:nth-child(2)):not(:nth-child(4)) if you have at least 6 columns and only want to exclude the 2nd and 4th, and not every even column.

Demo



Related Topics



Leave a reply



Submit