CODEWITHSUNDEEP
htmlcsssasscss-selectors
Jonas Praem
Jonas Praem

Reputation: 2444

CSS / SCSS - Access child of child element with unknown child type

If I have some html like this, with only a class applied to the root. I want to access all <i> tags which are located deeper in the html.

some example html:

<div class="some-class">
  <div> <!-- unknown type - could be span, div or something else -->
    <i></i>
  </div>
</div>

If the i tag was a direct child I could apply styling in scss like this:

> i {
  color: grey
}

If I knew that the first child was always a div element i could apply styling like this: 

> div > i {
  color: grey
}

However I don't know the type of the first child - it could be anything.

How do I correctly apply styling to the i tag in this case ?

Upvotes: 3

Views: 6421

Answers (2)

Giorgos Iordanidis
Giorgos Iordanidis

Reputation: 161

Did you try:

.some-class i {
//Your styles here
}

Upvotes: 1

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196187

Specifying the root element and just leaving a space means descendant, so

.some-class i {
    color: grey;
 }

should do what you want.

If you want to only style them if they are at least one level deeper than the root then use * which means any tag.

 .some-class * i {
    color: grey;
 }

Finally, if you want to target them at specifically the third level use 

  .some-class > * > i {
    color: grey;
 }

Upvotes: 2

Related Questions