CODEWITHSUNDEEP
htmlcss
Barris
Barris

Reputation: 1019

Selecting nested CSS classes

I would like to understand some behaviour I am experiencing with CSS class selection.

I am attempting to reference only css classes line-1 that are used as children of two separate parent classes. The first instance also has an additional classname. Which you can see below. Basically I need to select all of the .line-1 classes. Both have different parents .row icon explainBlah & .row icon.

index.html

<div class="row icon explainBlah">
  <div class="col-sm-3 col-xs-6">
    <div class="featureBox long">
      <div class="title">1</div>
      <div class="line-1"></div>
      <div class="description">blah blah
      </div>
    </div>
  </div>
  <div class="col-sm-3 col-xs-6">
    <div class="featureBox long">
      <div class="title">2</div>
      <div class="line-1"></div>
      <div class="description">blah blah
      </div>
    </div>
  </div>
  <div class="clearfix visible-xs-block"></div>
  <div class="col-sm-3 col-xs-6">
    <div class="featureBox long">
      <div class="title">3</div>
      <div class="line-1"></div>
      <div class="description">blah blah
      </div>
    </div>
  </div>
  <div class="col-sm-3 col-xs-6">
    <div class="featureBox long">
      <div class="title">4</div>
      <div class="line-1"></div>
      <div class="description">blah blah
      </div>
    </div>
  </div>
</div>

<div class="row icon">
  <div class="col-sm-3 col-xs-6">
    <div class="featureBox"><img src="images/icons/smartphone.svg" alt="smartphone.svg" height="30">
      <div class="title">Mobile</div>
      <div class="line-1"></div>
      <div class="description">Blah 2
      </div>
    </div>
  </div>
  <div class="col-sm-3 col-xs-6">
    <div class="featureBox"><img src="images/icons/[email protected]" alt="[email protected]" height="30">
      <div class="title">Efficiency</div>
      <div class="line-1"></div>
      <div class="description">Blah 2 <strong> Blah 2 </strong> Blah 2
      </div>
    </div>
  </div>
  <div class="clearfix visible-xs-block"></div>
  <div class="col-sm-3 col-xs-6">
    <div class="featureBox"><img src="images/icons/[email protected]" alt="[email protected]" height="30">
      <div class="title">No discovery</div>
      <div class="line-1"></div>
      <div class="description">Blah 2
      </div>
    </div>
  </div>
  <div class="col-sm-3 col-xs-6">
    <div class="featureBox"><img src="images/icons/[email protected]" alt="[email protected]" height="30">
      <div class="title">Clarity</div>
      <div class="line-1"></div>
      <div class="description">Blah 2
      </div>
    </div>
  </div>
</div>

I have managed to successfully select both child instances of the .line-1 elements as per the first example:

index.styl

.featureBox.long, .row.icon .featureBox
    .line-1
        max-width 160px

but I was surprised when this didn't work for the second .featureBox set of elements:

index.styl

.featureBox.long, .featureBox
    .line-1
        max-width 160px

Seeing as a direct reference .featureBox.long worked, why doesn't .featureBox and why do I have to use .row.icon .featureBox as in the first example?

Solution

Very simple: 

.row.icon .featureBox
    .line-1
        max-width 180px

The inclusion of more 'specific' selectors i.e. .row.icon .featureBox.long above would invalidate .row.icon .featureBox

Upvotes: 1

Views: 84

Answers (2)

Shashank
Shashank

Reputation: 2060

Why don't you simple target ".line-1" instead of going by the hierarchy, as you wish to style all the elements with class="line-1" itself.

Upvotes: 0

Aaron
Aaron

Reputation: 10430

remove the first class selection and use only the second. 

.row.icon .featureBox .line-1 {
    //selects .line-1 of every .featureBox element that is a child of .row.icon
}


.row.icon .featureBox.long .line-1 {
    //selects .line-1 every .featureBox  element that is a child of .row.icon and has an extra class of .long
}

By including the .row.icon you're making the selector more specific so will hold a higher priority over other styles applied to the .featureBox

Upvotes: 1

Related Questions