CODEWITHSUNDEEP
htmlcss
JillAndMe
JillAndMe

Reputation: 4571

How select first-child in this case?

I want to select p:first-child, but in this case as you can see 

.root p:first-child {
  background-color: green;
}

selects all p tags in root not first child: id="this"

How to select only id="this" using .root p:first-child in this case or should I use id?

code : https://codepen.io/qkreltms/pen/LYPLwPB

.root p:first-child {
  background-color: green;
}

p {
  margin: 0;
}

.container {
  display: inline-box
}

.root {
  display: flex;
}

div {
  display: block;
  background-color: pink;
  border: 1px solid red;
  width: 100px;
  height: 100px;
}
<div class="root" id="this">
  <div class="container">
    <p>test</p>
  </div>
  <div class="container">
    <p>test2</p>
  </div>
    <div class="container">
    <p>test3</p>
  </div>
</div>

Upvotes: 0

Views: 89

Answers (4)

Sumit Patel
Sumit Patel

Reputation: 4638

There is multiple way to select the first-child, it depend on your requirement following is few way to do that.

First if you want to select the first child of container then use below.

.root .container p:first-child {
  background-color: green;
}

p {
  margin: 0;
}

.container {
  display: inline-box
}

.root {
  display: flex;
}

div {
  display: block;
  background-color: pink;
  border: 1px solid red;
  width: 100px;
  height: 100px;
}
<div class="root">
  <div class="container">
    <p>test</p>
  </div>
  <div class="container">
    <p>test2</p>
  </div>
  <div class="container">
    <p>test3</p>
  </div>
</div>

Second if you want to select the first of child of first container then use below.

.root .container:first-child p {
  background-color: green;
}

p {
  margin: 0;
}

.container {
  display: inline-box
}

.root {
  display: flex;
}

div {
  display: block;
  background-color: pink;
  border: 1px solid red;
  width: 100px;
  height: 100px;
}
<div class="root">
  <div class="container">
    <p>test</p>
  </div>
  <div class="container">
    <p>test2</p>
  </div>
  <div class="container">
    <p>test3</p>
  </div>
</div>

Upvotes: 1

Soothran
Soothran

Reputation: 1243

first-child selector select and style every element that is the first child of its parent. So here the styles were being applied to all <p> tags as there are only one <p> tag inside its respective parent .container

Instead of selecting p's first-child, select first-child of the class .container for getting the desired result.

.root .container:first-child p{
  background-color: green;
}

p {
  margin: 0;
}

.container {
  display: inline-box
}

.root {
  display: flex;
}

div {
  display: block;
  background-color: pink;
  border: 1px solid red;
  width: 100px;
  height: 100px;
}
<div class="root">
  <div class="container">
    <p>test</p>
  </div>
  <div class="container">
    <p>test2</p>
  </div>
    <div class="container">
    <p>test3</p>
  </div>
</div>

Upvotes: 4

strek
strek

Reputation: 1230

Is this what you are looking for ? Selecting the paragraph in the first-child of the root element.

.root .container:first-child p {
  background-color: green;
}

p {
  margin: 0;
}

.container {
  display: inline-box
}

.root {
  display: flex;
}

div {
  display: block;
  background-color: pink;
  border: 1px solid red;
  width: 100px;
  height: 100px;
}
<div class="root">
  <div class="container">
    <p>test</p>
  </div>
  <div class="container">
    <p>test2</p>
  </div>
  <div class="container">
    <p>test3</p>
  </div>
</div>

Upvotes: 1

FadedForEver
FadedForEver

Reputation: 144

with this css snippet:

.root p:first-child {
     background-color: green;
}

your are selecting every p elements that are first in their own parents. change to this for first p elements inside first container:

.root .container:first-child p{
      background-color: green;
}

or this for first container and first p:

.root .container:first-child p:first-child{
      background-color: green;
}

Upvotes: 4

Related Questions