Excluding First Element in CSS

Excluding first element in CSS

#someid ul li:not(:first-of-type) {
      font-weight: bold;
}

or if that doesn't work in ancient browsers:

#someid ul li {
      font-weight: bold;
}
#someid ul li:first-child {
      font-weight: normal;
}

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.

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; }

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;
}

CSS apply to all inside div but skip first child

Apply to all and remove it from the first one:

/* All the titles */.title-title:after {  content: "";  display: block;  width: 40%;  margin-top: 5px;  margin-left: auto;  margin-right: auto;  border: 1px red solid;}/* We remove from the first one*/#first .title-title:after {  display:none;}
/* Part of my own external bootstrap rip off LUL */.py-ta-c {  text-align: center;}
.py-mb-m {  margin-bottom: 10%;}

<div id="first" class="py-ta-c py-mb-m"> <h2 class="title-title">First</h2> <h4 class="title-subtitle">Exclude me</h4></div>
<div id="second" class="py-ta-c py-mb-m"> <h2 class="title-title">Second</h2> <h4 class="title-subtitle">Include me</h4></div>
<div id="third" class="py-ta-c py-mb-m"> <h2 class="title-title">Third</h2> <h4 class="title-subtitle">Include me</h4></div>
<!-- AND SO ON -->

How do I hide only the first element of a type?

You have a few different options:

1. Use the :first-of-type pseudo class to select the first element of type:

   .ctr-1 > h3:first-of-type {
     display: none; 
   }
   

2. Or use the :nth-of-type(n) pseudo class and specify the index of the first element:

   .ctr-1 > h3:nth-of-type(0) {
     display: none; 
   }
   

3. If type doesn't matter, and you always want to select the first child, use the :first-child pseudo class:

   .ctr-1 > h3:first-child {
     display: none; 
   }
   

remove pseudo class of first item

You can exclude the first li, using the :not() selector:

#sub_menu ul li:not(:first-child):before {
  content: "• ";
  color: #FFFFFF; 
}

If you need IE8 compatibility, you may use a combination of sibling selectors, like:

#sub_menu ul li:first-child ~ li:before {
  content: "• ";
  color: #FFFFFF; 
}

EDIT

Also, just a side-note... According to your html, the selector is wrong. If the ul has the id of #sub_menu, it should be

#sub_menu li

instead of

#sub_menu ul li

Css Selector for a class except the first element

try this http://jsfiddle.net/5XuE3/

#container div.child + div.child
{
border: solid 1px black;
}

---

Related Topics