Select first child with specific class and hide element within it

Question

I'm trying to hide the span element inside of the first .lineB element:

<div id="main">
    <div class="lineA">I'm LineA</div>
    <div class="lineA">I'm LineA</div>
    <div class="lineB">I'm the first LineB <span>DONT SHOW ME</span></div>
    <div class="lineB">I'm LineB</div>
    <div class="lineB">I'm LineB</div>
    <div class="lineA">I'm LineA</div>
</div>

I've tried:

#main .lineB:first-of-type span {display: none}

But this doesn't work. Any ideas why?

possible duplicate of [CSS selector for first element with class](http://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class) — Bijan, Nov 04 '14 at 22:48
@Bijan - Not quite a duplicate. The answer supplied there does not solve my issue. — Fillip Peyton, Nov 04 '14 at 22:55

Gabriele Petrioli · Accepted Answer · 2014-11-04T23:10:05.000

3

Perhaps applying for all, and negating for all but first will fit your case

.lineB{color:red}
.lineB ~ .lineB{color:inherit}

<div id="main">
    <div class="lineA">I'm LineA</div>
    <div class="lineA">I'm LineA</div>
    <div class="lineB">I'm the first LineB</div>
    <div class="lineB">I'm LineB</div>
    <div class="lineB">I'm LineB</div>
    <div class="lineA">I'm LineA</div>
</div>

In your specific example you could just use #main .lineB span{display:none} since you only have a span inside the first.

The :first-of-type works on the element type (the tag) so it would match only an element that is the first of its type (tag) under the parent. Since all of your elements are div the :first-of-type matches the first div.

Extending my initial answer to handle this scenario you can do

#main .lineB span{display:none}
#main .lineB ~ .lineB span{display:initial}

<div id="main">
    <div class="lineA">I'm LineA</div>
    <div class="lineA">I'm LineA</div>
    <div class="lineB">I'm the first <span>hide me</span> LineB</div>
    <div class="lineB">I'm LineB <span> show me</span></div>
    <div class="lineB">I'm LineB</div>
    <div class="lineA">I'm LineA</div>
</div>

edited Nov 04 '14 at 23:10

answered Nov 04 '14 at 22:54

Gabriele Petrioli

191,379
34
261
317

Thanks for your answer. Unfortunately, this isn't really working for me. I'll update my question with a bit more detail of what I'm trying to do – Fillip Peyton Nov 04 '14 at 22:59
@FillipPeyton, that would be helpful to find a workaround as there is no selector for `:first-of-class` – Gabriele Petrioli Nov 04 '14 at 23:03
Updated my question, but nevermind. I must have mistyped something when applying this to my situation: http://jsfiddle.net/fmpeyton/pfj7tv1f/ – Fillip Peyton Nov 04 '14 at 23:07
If you wanna adjust your answer to the updated question, I'll gladly select it as the correct answer. – Fillip Peyton Nov 04 '14 at 23:08

score 1 · Answer 2 · answered Nov 04 '14 at 23:15

In short: No. There is no : first-of-class selector. What you can do is:

Use .lineA + .lineB to to select every element with the class "lineB" that follows an element with class "lineA".

or

Use the .lineB:first-of-type selector and use a different element type for the two different classes (e.g. p and div).

or

Of course, use JavaScript.

Select first child with specific class and hide element within it

2 Answers2