CSS applies to all inner divs, but skip the first child

Question

I am new and wonder.

Purpose: To display a panel under all the classes ". Title", and not the first.

I did this and it works great, but for the purpose of training, I would like to see a better / single-line / professional solution, maybe?

Thanks for your advice.

#second .title-title:after, #third .title-title:after { content: ""; display: block; width: 40%; margin-top: 5px; margin-left: auto; margin-right: auto; border: 1px red solid; } /* 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 --> 

Answer 1

Apply to all and remove it from the first:

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

Or use the not() selector:

 /* Select all the divs but not the one with ID first*/ div:not(#first) .title-title:after { content: ""; display: block; width: 40%; margin-top: 5px; margin-left: auto; margin-right: auto; border: 1px red solid; } /* OR Select all the divs but not the first child div:not(:first-child) .title-title:after { } */ /* 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 --> 

Another with nth-child() / nth-of-type() (but be careful when changing the HTML structure):

 /* This will select 2nd,3rd,4th .. */ div:nth-child(n+2) .title-title:after { content: ""; display: block; width: 40%; margin-top: 5px; margin-left: auto; margin-right: auto; border: 1px red solid; } /* OR div:nth-of-type(n+2) .title-title:after { } */ /* 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 --> 

Answer 2

You can also use :not(:first-child) for the parent if you do not want to use any identifier:

 div:not(:first-child) .title-title::after { content: ""; display: block; width: 40%; margin-top: 5px; margin-left: auto; margin-right: auto; border: 1px red solid; } 

Answer 3

 .wrapper div h2:after { content: ""; display: block; width: 40%; background: red; margin-top: 5px; margin-left: auto; margin-right: auto; border: 1px red solid; } .wrapper div:first-child h2: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 class="wrapper"> <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> </div> <!-- AND SO ON -->