Use pseudo element first-child in several articles inside a section

Question

I want to style only the first .mask div, but I can't find how to do that (besides giving another class and style it). Is there a way using a pseudo-element such as :first-child or :first-of-type?

I have this html:

    <section class="cont-content work" id="work">
        <h1>work</h1>
        <article class="view">
            <img src="images/g.jpg" alt="">
                <div class="mask">
                    <h2>Title</h2>
                        <p>subtitle</p>
                    <a href="#" class="info">Read More</a>
                </div>
        </article>

        <article class="view">
            <img src="images/m.jpg" alt="">
                <div class="mask">
                    <h2>title</h2>
                        <p>subtitle</p>
                    <a href="#" class="info">Read More</a>
                </div>
        </article>

        <article class="view">
            <img src="images/p.jpg" alt="">
                <div class="mask">
                    <h2>title</h2>
                        <p>subtitle</p>
                    <a href="#" class="info">Read More</a>
                </div>
        </article>          
    </section>

Thanks!

Four_lo · Answer 1 · 2015-08-05T16:13:36.213

0

Yes

   #work article:first-of-type .mask

is what you are looking for then

edited Aug 05 '15 at 16:13

answered Aug 05 '15 at 15:31

Four_lo

1,150
10
28

score 0 · Answer 2 · answered Aug 05 '15 at 15:40

CSS3 :nth-of-type() Selector

.view:nth-child(2) .mask {
  background: lightblue;
}

<section class="cont-content work" id="work">
  <h1>work</h1>

  <article class="view">
    <img src="images/g.jpg" alt="">
    <div class="mask">
      <h2>Title</h2>

      <p>subtitle</p> <a href="#" class="info">Read More</a>

    </div>
  </article>
  <article class="view">
    <img src="images/m.jpg" alt="">
    <div class="mask">
      <h2>title</h2>

      <p>subtitle</p> <a href="#" class="info">Read More</a>

    </div>
  </article>
  <article class="view">
    <img src="images/p.jpg" alt="">
    <div class="mask">
      <h2>title</h2>

      <p>subtitle</p> <a href="#" class="info">Read More</a>

    </div>
  </article>
</section>

Thanks vanburenx, it's very useful! – markens Aug 05 '15 at 15:54 — markens, Aug 05 '15 at 15:54

score 0 · Answer 3 · answered Aug 05 '15 at 15:41

0

Use nth-child()

.view:nth-child(2) .mask {
 font-family: Arial;
}

http://codepen.io/anon/pen/RPvgjP

answered Aug 05 '15 at 15:41

Paul Redmond

3,276
4
32
52

Thanks very much Paul. That is what I wanted! – markens Aug 05 '15 at 15:54

score 0 · Answer 4 · answered Aug 05 '15 at 15:44

0

Given the structure you have I would select the first article inside the specific section (which has an ID) and go from there:

#work article:first-of-type .mask {
    /* your styles here */
 }

Oh, by the way, first-child / first-of-type etc. are pseudo-classes not pseudo-elements.

answered Aug 05 '15 at 15:44

Paulie_D

107,962
13
142
161

Thanks Paulie. Sorry for the spelling, I'm a mess.I'll remember that – markens Aug 05 '15 at 15:55

Use pseudo element first-child in several articles inside a section

4 Answers4