Reputation: 25
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>
Upvotes: 0
Views: 1359
Reputation: 18133
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>
Upvotes: 2