CODEWITHSUNDEEP
css
Rui Afonso Pereira
Rui Afonso Pereira

Reputation: 527

CSS - Select all childs except the first

I have the following:

<div class="chapter"> 
     <p>chapter 1, paragraph 1</p>
     <p>chapter 1, paragraph 2</p>
     <div class="section">
          <p>chapter 1, section 1, paragraph 1</p>
          <p>chapter 1, section 1, paragraph 2</p>
     </div>
</div>
<div class="chapter"> 
     <p>chapter 2, paragraph 1</p>
     <div class="section">
          <p>chapter 2, section 1, paragraph 1</p>
          <p>chapter 2, section 1, paragraph 2</p>
     </div>
     <div class="section">
          <p>chapter 2, section 2, paragraph 1</p>
          <p>chapter 2, section 2, paragraph 2</p>
     </div>
</div>

Using CSS, is it possible to select all elements <p>, except the first, for each element .chapter and .section? For instance, I'd like to select <p>chapter 1, paragraph 2</p>, <p>chapter 1, section 1, paragraph 2</p>, <p>chapter 2, section 1, paragraph 2</p>, <p>chapter 2, section 2, paragraph 2</p>, and so on.

Thanks.

Upvotes: 2

Views: 156

Answers (5)

David Thomas
David Thomas

Reputation: 253308

One further approach, as part of a drive of completism, perpaps:

.chapter p:first-child ~ p {
  color: red;
}

.chapter {
  border: 1px solid #000;
}

.section {
  border-top: 1px solid #999;
  margin-left: 2em;
}
<div class="chapter"> 
     <p>chapter 1, paragraph 1</p>
     <p>chapter 1, paragraph 2</p>
     <div class="section">
          <p>chapter 1, section 1, paragraph 1</p>
          <p>chapter 1, section 1, paragraph 2</p>
     </div>
</div>
<div class="chapter"> 
     <p>chapter 2, paragraph 1</p>
     <div class="section">
          <p>chapter 2, section 1, paragraph 1</p>
          <p>chapter 2, section 1, paragraph 2</p>
     </div>
     <div class="section">
          <p>chapter 2, section 2, paragraph 1</p>
          <p>chapter 2, section 2, paragraph 2</p>
     </div>
</div>

References:

Upvotes: 1

alphawow
alphawow

Reputation: 390

You can use element+element selector for your task and here is example. 

.chapter p + p,
.section p + p {  };

It will select all next elements after first p tag.

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195972

You should use the :first-of-type combined with the :not

.chapter > p:not(:first-of-type),
.section > p:not(:first-of-type){
  color:#ccc
}
<div class="chapter"> 
     <p>chapter 1, paragraph 1</p>
     <p>chapter 1, paragraph 2</p>
     <div class="section">
          <p>chapter 1, section 1, paragraph 1</p>
          <p>chapter 1, section 1, paragraph 2</p>
     </div>
</div>
<div class="chapter"> 
     <p>chapter 2, paragraph 1</p>
     <div class="section">
          <p>chapter 2, section 1, paragraph 1</p>
          <p>chapter 2, section 1, paragraph 2</p>
          <p>chapter 2, section 1, paragraph 3</p>
          <p>chapter 2, section 1, paragraph 4</p>
     </div>
     <div class="section">
          <p>chapter 2, section 2, paragraph 1</p>
          <p>chapter 2, section 2, paragraph 2</p>
     </div>
</div>

Upvotes: 2

Reza Aria
Reza Aria

Reputation: 157

You can use nth-child

<style>
	.chapter p:nth-child(2) {
		color: red;
	}
	.section p:nth-child(2) {
		color: blue
	}
</style>
<div class="chapter"> 
     <p>chapter 1, paragraph 1</p>
     <p>chapter 1, paragraph 2</p>
     <div class="section">
          <p>chapter 1, section 1, paragraph 1</p>
          <p>chapter 1, section 1, paragraph 2</p>
     </div>
</div>
<div class="chapter"> 
     <p>chapter 2, paragraph 1</p>
     <div class="section">
          <p>chapter 2, section 1, paragraph 1</p>
          <p>chapter 2, section 1, paragraph 2</p>
     </div>
     <div class="section">
          <p>chapter 2, section 2, paragraph 1</p>
          <p>chapter 2, section 2, paragraph 2</p>
     </div>
</div>

Upvotes: 0

Weafs.py
Weafs.py

Reputation: 22992

Use :not(:first-child)

.chapter p:not(:first-child) {
  color: red;
}
<div class="chapter"> 
     <p>chapter 1, paragraph 1</p>
     <p>chapter 1, paragraph 2</p>
     <div class="section">
          <p>chapter 1, section 1, paragraph 1</p>
          <p>chapter 1, section 1, paragraph 2</p>
     </div>
</div>
<div class="chapter"> 
     <p>chapter 2, paragraph 1</p>
     <div class="section">
          <p>chapter 2, section 1, paragraph 1</p>
          <p>chapter 2, section 1, paragraph 2</p>
     </div>
     <div class="section">
          <p>chapter 2, section 2, paragraph 1</p>
          <p>chapter 2, section 2, paragraph 2</p>
     </div>
</div>

Upvotes: 1

Related Questions