Select nested elements via css3

Question

How can i hide the strong line via css...?

Is the .col-md-12 of the third row... is not the row, is the col

.bannerHeader .row:nth-child(3) .col-md-12 {display:none}

does not run....

.bannerHeader .row::nth-child(3) .col-md-12 {
  display: none
}

<div class="bannerHeader"><br>
  <div class="row"><br>
    <div class="col-md-12"><br>
      <div class="gwt-Label gwt-Label-BannerFormatLink">Text</div><br>
    </div><br>
  </div><br>
  <div class="row"><br>
    <div class="col-lg-6 col-md-12"><br>
      <div class="row"><br>
        <div class="col-md-4">Text</div><br>
        <div class="col-md-8"><br>
          <div class="gwt-Label Inline">Text</div><br>
        </div><br>
      </div><br>
    </div><br>
    <div class="col-lg-6 col-md-12"><br>
      <div class="row"><br>
        <div class="col-md-4">Text</div><br>
        <div class="col-md-8"><br>
          <div class="gwt-Label Inline">Text</div><br>
        </div><br>
      </div><br>
    </div><br>
  </div><br>
  
  <div class="row"> <br>
<!-- this col should be selected -->
    <div class="col-lg-6 col-md-12"><br>
      <div class="row"><br>
        <div class="col-md-4">Text</div><br>
        <div class="col-md-8"><br>
          <div class="gwt-HTML Inline">Text</div><br>
        </div><br>
      </div> <br>
    </div><br>
    <div class="col-lg-6 col-md-12"><br>
      <div class="row"><br>
        <div class="col-md-4">Text</div><br>
        <div class="col-md-8"><br>
          <div class="gwt-HTML Inline">Text</div><br>
        </div><br>
      </div><br>
    </div><br>
  </div><br>
</div>

`::` is for pseudo-elements, but `nth-child()` is a pseudo selector. `:` is the correct prefix for pseudo-selectors. — connexo, Mar 09 '18 at 13:05
What are all those `
` elements for? They prevent your approach from working. — connexo, Mar 09 '18 at 13:09

LinkinTED · Accepted Answer · 2018-03-09T13:30:19.057

There are a few flaws in your selector

.bannerHeader .row::nth-child(3) .col-md-12 { }

In the first version of your question, you use ::nth-child with a double colon.

: are pseudo-classes
:: are pseudo-elements

The difference is well explained here:
What is the difference between a pseudo-class and a pseudo-element in CSS?

The second problem is that you use a class selector combined with a pseudo class selector. (Fixed the : here)

.row:nth-child(3)

Which isn't false.
I however believe that you use this to select the third .row element. Well, there isn't a nth-of-class selector. What this selector does, it selects the third child that also has the .row class.

Which doesn't give you what you want.
If you look at the HTML in my snippet, I've commented the children of .bannerHeader. The <br /> also count as children. So the third .row is actually the sixth child.

So instead I advice you to filter on the div, rather than the class. To do so, use the pseudo selector nth-of-type:

.bannerHeader div:nth-of-type(3)

Additionally you could add the .row selector as well. Which in my opinion is obsolete.

.bannerHeader div.row:nth-of-type(3)

Then after your edit, you say you want to select the first .col-md-12. Same as above, you can't use nth- on classes, so instead again use nth-of-type. In this case the :first-of-type or the equivalent nth-of-type(1).

You'll also need to use the direct child > selector:

.bannerHeader div:nth-of-type(3) > div:first-of-type
/* or */
.bannerHeader div.row:nth-of-type(3) > div.col-md-12:first-of-type

All together:

.bannerHeader div:nth-of-type(3) > div:first-of-type {
  border: 1px solid red;
}

<div class="bannerHeader">
  <!-- child 1 -->
  <br> 
  <!-- child 2 -->
  <div class="row"><br>
    <div class="col-md-12"><br>
      <div class="gwt-Label gwt-Label-BannerFormatLink">Text</div><br>
    </div><br>
  </div>
  <!-- child 3 -->
  <br>
  <!-- child 4 -->
  <div class="row"><br>
    <div class="col-lg-6 col-md-12"><br>
      <div class="row"><br>
        <div class="col-md-4">Text</div><br>
        <div class="col-md-8"><br>
          <div class="gwt-Label Inline">Text</div><br>
        </div><br>
      </div><br>
    </div><br>
    <div class="col-lg-6 col-md-12"><br>
      <div class="row"><br>
        <div class="col-md-4">Text</div><br>
        <div class="col-md-8"><br>
          <div class="gwt-Label Inline">Text</div><br>
        </div><br>
      </div><br>
    </div><br>
  </div>
  <!-- child 5 -->
  <br>
  <!-- child 6 -->
  <!-- this row should be selected -->
  <div class="row"> <br>
    <div class="col-lg-6 col-md-12"><br>
      <div class="row"><br>
        <div class="col-md-4">Text to be selected</div><br>
        <div class="col-md-8"><br>
          <div class="gwt-HTML Inline">Text to be selected</div><br>
        </div><br>
      </div> <br>
    </div><br>
    <div class="col-lg-6 col-md-12"><br>
      <div class="row"><br>
        <div class="col-md-4">Text</div><br>
        <div class="col-md-8"><br>
          <div class="gwt-HTML Inline">Text</div><br>
        </div><br>
      </div><br>
    </div><br>
  </div><br>
</div>

`::` is for pseudo-elements, but `nth-child()` is a pseudo selector. `:` is the correct prefix for pseudo-selectors. This should be pointed out additionally. Instead, you copied the error in your introductory code quotation. — connexo, Mar 09 '18 at 13:06
Also, it is important that OP understands that neither `:nth-child()` nor `:nth-of-type()` care for the css class restriction in the selector. — connexo, Mar 09 '18 at 13:08

Select nested elements via css3

1 Answers1