CODEWITHSUNDEEP
htmlcsscss-selectors
Mohamed Ahmed
Mohamed Ahmed

Reputation: 27

selecting HTML element

I use a class named row across my site

.row {
  max-width: 1140px;
  margin: 0 auto;
}

Like this in image

And here I want to target this specific one to make the display property flex and after this to target the class works-step inside it to make the display property inline-block so they appear side by side because now it appears like this

Like in this Gif

I tried this

section .row:second-child {
  display: flex;
}
section .row:second-child .works-step{
  display: inline-block;
}

but it didn't work

Upvotes: 0

Views: 92

Answers (2)

Johannes
Johannes

Reputation: 67738

Your selector needs to be section .row .steps-box:nth-child(2) .works-steps { ... } (you * can* use > in-between to be even more specific, but it's probably not necessary.

:nth-child(...) refers to the child element itself, i.e. the child element that is the nth child of its parent, in your case .steps-box as the second child element of .row

Upvotes: 1

Amini
Amini

Reputation: 1792

  1. You've chosen the wrong Css class pseudo selector. .row:second-child is not a correct selector. You can use .row:nth-child(2). You can read about Css class pseudo selectors here.
  2. According to No. 1 that's why display: inline-block is not working on .works-step. You must replace these codes instead of the code you wrote at the top.
/* According to the second .row */
section:nth-child(2) {
   display: flex;
}

/* According to section > LAST .row > LAST .steps-box */
section:nth-child(2) {
   display: inline-block;
}
  1. If you want to place the works-step side by side, you can simply set the display of its parent to flex (.steps-box). You can ignore using display: inline-block for .works-step, cause flex is more preferred and easy to use.
.steps-box {
   display: flex;
}

Upvotes: 0

Related Questions