CODEWITHSUNDEEP
htmlcsscss-selectors
HoPollo
HoPollo

Reputation: 53

CSS apply to all inside div but skip first child

i'm a beginner and have a question.

The goal : Render a bar under all ".title-title" classes NOT not the first one.

I made that and it's working great but for the purpose of learning I would like to see a better/one line/pro solution maybe ?

Thanks for your advices.

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

Upvotes: 5

Views: 4980

Answers (3)

Temani Afif
Temani Afif

Reputation: 272909

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

Or use 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 one with nth-child()/nth-of-type() (but be careful when the HTML structure changes):

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

Upvotes: 8

rmarif
rmarif

Reputation: 548

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

Upvotes: 1

jamcreencia
jamcreencia

Reputation: 6912

You may also use :not(:first-child) on the parent if you don't want to use any id:

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

Upvotes: 2

Related Questions