Selector for all elements except the first

9

I have 11 p elements with the title class p.title

What would be the selector to add styles to all p.title minus the first one?

I could select all the others with nth-child () and their numbers but it would not be the most efficient

    
asked by Rodrypaladin 01.11.2017 в 23:20
source

4 answers

12

You can use the selector : not (selector) and filter with the < a href="https://developer.mozilla.org/en/docs/Web/CSS/:first-of-type">: first-of-type .

p.title:not(:first-of-type) {
  color: red;
}
<p class="title">Buenos días</p>
<p class="title">Buenas tardes</p>
<p class="title">Buenas noches</p>
  

Examples of using nth, first-child, first-of-type, etc ... Link

    
answered by 01.11.2017 в 23:24
6

CLARIFICATION : My original answer will not work in cases where there is a paragraph (a <p> element) with a class other than title (or no class) before the first paragraph with class title .

To avoid this, or to avoid any element that we put in the middle of the paragraphs with class title or without class "break" our scheme, we can use the selector ~ .

By means of the selector ~ we will be able to detect all paragraphs with class title that are preceded by another paragraph with class title . In this way, the first paragraph with class title will not be selected since it will not be preceded by any other paragraph with that class.

Example:

p.title ~ p.title{
  color: red;
}
<span>Prueba</span>
<p>Prueba</p>
<p class="otracosa">Prueba</p>
<p class="title">Esto es un texto</p>
<p class="title">Esto es un texto</p>
<p class="title">Esto es un texto</p>
<p>Prueba</p>
<span class="title">Prueba</span>
<p class="title">Esto es un texto</p>
<p class="title">Esto es un texto</p>
<p class="title">Esto es un texto</p>
<p class="title">Esto es un texto</p>

As can be seen, it does not affect that there are paragraphs with no class (or with a different class) in front of the first paragraph with class title or that there are paragraphs in between the paragraphs with that class. Nor does it affect that there are different elements (in this case I have entered a span ) with the same class title .

ORIGINAL ANSWER

You could use the not selector and indicate that you do not want the styles for the first element applied ( first-child ).

Example:

p.title:not(:first-child){
  color: red;
}
<p class="title">Esto es un texto</p>
<p class="title">Esto es un texto</p>
<p class="title">Esto es un texto</p>
<p class="title">Esto es un texto</p>
<p class="title">Esto es un texto</p>
<p class="title">Esto es un texto</p>
<p class="title">Esto es un texto</p>
    
answered by 01.11.2017 в 23:24
5

Of course you can use :nth-child() , you must use it in the following way to achieve what you want:

.title:nth-child(n + 2){
  color: chocolate;
}
<p class="title">TITLE</p>
<p class="title">TITLE</p>
<p class="title">TITLE</p>
<p class="title">TITLE</p>
<p class="title">TITLE</p>
<p class="title">TITLE</p>
<p class="title">TITLE</p>
<p class="title">TITLE</p>
<p class="title">TITLE</p>
<p class="title">TITLE</p>
<p class="title">TITLE</p>
    
answered by 01.11.2017 в 23:26
5

Another possible solution is to use the general sibling selector ~ .

If we put   p.title ~ p.title are selected paragraphs with class title that have a previous class that is also a paragraph with class title , therefore the first paragraph that has class title will never be selected. It does not affect paragraphs without class title or other elements that also have class title .

An example to see it working:

p.title ~ p.title {
  color: red;
}
<p>párrafo sin clase title</p>
<p class="title">párrafo 1</p>
<p class="title">párrafo 2</p>
<p class="title">párrafo 3</p>
<div class="title">div con clase title</div>
<p class="title">párrafo  4</p>
<p class="title">párrafo 5</p>
<p class="title">párrafo 6</p>
<p class="title">párrafo 7</p>
<p class="title">párrafo 8</p>
<p class="title">párrafo 9</p>
<p class="title">párrafo 10</p>
<p class="title">párrafo 11</p>
    
answered by 03.11.2017 в 08:55