Использовать псевдо-элемент first-child в нескольких статьях внутри раздела

Question

Я хочу создать только первый .mask div, но я не могу найти, как это сделать (помимо предоставления другого класса и стиля его). Есть ли способ использования псевдоэлемента, такого как: first-child или: first-of-type?

У меня есть этот 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> 

Спасибо!

Answer 1

Да

#work article:first-of-type .mask 

является то, что вы ищете то

Answer 2

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>

Answer 3

Использование nth-child()

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

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

Answer 4

Учитывая структуру у вас есть я бы выбрал первый article внутри конкретного section (который имеет идентификатор) и идти оттуда:

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

О, кстати, first-child/first-of-type и т. Д. Являются псевдо-классы не псевдоэлементы.