how do I target the first child of the first appearance of an element

Question

Ok so I have several blocks of code that look like:

    <div class="news-sec">
        <h3 class="col-xs-8">heading</h3>
        <p class="col-xs-4>paragraph</p>
    </div>
  <div class="news-sec">
        <h3 class="col-xs-8">heading</h3>
        <p class="col-xs-4>paragraph</p>
    </div>
  <div class="news-sec">
        <h3 class="col-xs-8">heading</h3>
        <p class="col-xs-4>paragraph</p>
    </div>

My trouble is that the class is being output by drupal. I need the first one not to have the bootstrap classes, however because they are all the same field they all get spit out wrapped up in the col-xs-# divs. I figure I can write some css to negate the effects of bootstrap such as:

.news-sec h3:first-of-type{
    width:100%;
    float:none;
}

What I've learned though is that this will affect every .news-sec top level h3 instead of looking at only the first .news-sec. Is there a way to accomplish what I want to do without js.

PS My drupal dev is out for the week and I can't edit the way it's being output, only after.

What about [`:nth-child`](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child)? — zero298, Apr 20 '17 at 18:00
you need [`:first-child`](https://developer.mozilla.org/en/docs/Web/CSS/:first-child) and if negation is also required, look for `:not` — tanmay, Apr 20 '17 at 18:01

score 0 · Answer 1 · answered Apr 20 '17 at 18:04

0

.news-sec h3:first-child targets the first and only the first.

answered Apr 20 '17 at 18:04

Josh

66
1
9

3

That targets the "first and only the first" `h3`. Certainly not the `.news-sec`, which is what the OP is trying to do. Your answer is essentially the same problem the OP is having. – Wes Foster Apr 20 '17 at 18:22
That what he wanted to do, the selected answer uses the same thing. – Josh Apr 20 '17 at 18:40
1

The correct answer is applying the pseudo selector to the `.news-sec` and not to the `h3` like you, and the OP, have done. Look again. – Wes Foster Apr 20 '17 at 18:45
Ahh, yes. Sorry about that. – Josh Apr 20 '17 at 19:06

Wes Foster · Accepted Answer · 2017-04-20T18:10:16.557

0

.news-sec:first-child h3 is what you want. This gets the first .news-sec and applies the style to its h3. Note how I've applied the pseudo selector (:first-child) to the .news-sec instead of the h3

(Compare this to your code: .news-sec h3:first-of-type -- Your code was looking for the first h3 inside of all .news-sec)

Here's a demo:

.news-sec:first-child h3 {
  color: red
}

<div class="news-sec">
  <h3 class="col-xs-8">heading</h3>
  <p class="col-xs-4">paragraph</p>
</div>
<div class=" news-sec ">
  <h3 class="col-xs-8">heading</h3>
  <p class="col-xs-4">paragraph</p>
</div>
<div class="news-sec">
  <h3 class="col-xs-8">heading</h3>
  <p class="col-xs-4">paragraph</p>
</div>

Side note: You're missing some quotes in your provided HTML code near each col-xs-4.

edited Apr 20 '17 at 18:10

answered Apr 20 '17 at 18:05

Wes Foster

8,770
5
42
62

shouldn't those `div.news-sec` be wrapped with some other tag, just to be sure? `first-child` selector works when the element is the first of a group of siblings, AFAIK. – Sebastianb Apr 20 '17 at 18:15
Correct. I'm going off what code the OP provided. Since three `col-xs-4` divs exist, I'm assuming that it is an entire 12-column row. If so, this would be wrapped in a `div` anyway, since it's bootstrap. So it should work fine. – Wes Foster Apr 20 '17 at 18:16
1

@Sebastianb This code work as is, based on the given code, and if the OP _forgot_ something, we can't anticipate that and give an answer covering what we don't know – Asons Apr 20 '17 at 18:20
@LGSon true, I just thought to add some kind of clarification, given the usual confusion with [first-child](http://stackoverflow.com/a/8539107/5796253) – Sebastianb Apr 20 '17 at 18:27
@Sebastianb What better would be to explain the difference between `first-of-type`, which OP had in the question (for some reason), with the now suggested `first-child` – Asons Apr 20 '17 at 18:29
Read the first part. You can read about it in MDN too, for that matter. My point is that there's usually some confusion with first-child, that's all. If for some reason his set of `.news-sec` weren't the first elements of the parent, this wouldn't work, thus the reason why I thought it would be nice to clarify it. – Sebastianb Apr 20 '17 at 18:32
@Sebastianb If you assume I don't know the difference, that is not the case, I mean for users that does not know...and the answer does not give any such explanation – Asons Apr 20 '17 at 18:36
@LGSon An explanation of the difference is not relevant to answering the question. OP was applying the pseudo selector to the wrong element, which is a common confusion. – Wes Foster Apr 20 '17 at 18:37
@WesFoster Why not?... After all, OP used it in the question, and, in this case, if you were to use `first-of-type` in the correct way, that would also target the first h3 in the same way `first-child` does – Asons Apr 20 '17 at 18:39
I think I've been misunderstood. I'm not talking about first-of-type, I'm talking about first-child. The first paragraph of the linked answer talked about the confusion in its use. – Sebastianb Apr 20 '17 at 18:44

how do I target the first child of the first appearance of an element

2 Answers2