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