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, ortd: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
How to Reference One CSS Rule Within Another
Css Animation Delay in Repeating
Twitter Bootstrap Form File Element Upload Button
What's the Difference Between CSS Classes .Foo.Bar (Without Space) and .Foo .Bar (With Space)
Every Item to Have the Same Width as the Widest Element
Sub-Pixels Calculated and Rendered Differently Among Browsers
How to Make Google Fonts Work in Ie
Style ≪Select≫ Element Based on Selected ≪Option≫
Cross Site Scripting in CSS Stylesheets
How to Set Up Fixed Width For ≪Td≫
Dynamically Change Color to Lighter or Darker by Percentage Css
Why Doesn't the CSS Calc() Function Work For Me
How to Use Font Awesome from Webjars.Org With Jsf