Est-il possible de combiner: premier de type et: après sur la même classe? Par exemple:
.feature.feature--featured:first-of-type:after {
content: '';
position: absolute;
bottom: 0;
width: 100%;
height: 4px;
background: #4a90e2;
left: 0;
}
<div class="row">
<div class="col-md-4">
<div class="feature feature--featured feature-1 boxed boxed--border bg--white">
<h5>This is a title</h5>
<p>
21 July, 2019
</p>
<a href="#">
Read Story
</a>
<span class="label">New</span>
</div>
</div>
<div class="col-md-4">
<div class="feature feature--featured feature-1 boxed boxed--border bg--white">
<h5>This is a title</h5>
<p>
21 July, 2019
</p>
<a href="#">
Read Story
</a>
<span class="label">New</span>
</div>
</div>
<div class="col-md-4">
<div class="feature feature--featured feature-1 boxed boxed--border bg--white">
<h5>This is a title</h5>
<p>
21 July, 2019
</p>
<a href="#">
Read Story
</a>
<span class="label">New</span>
</div>
</div>
</div>
Je ne peux pas le faire fonctionner. Merci!
1 réponse
Comme le disent les commentaires, si vous voulez que seul le premier div avec col-md-4
soit ciblé, placez le qualificatif first-of-type
dans la classe .col-md-4
plutôt que dans la classe .feature.feature--featured
. C'est tout.
.col-md-4:first-of-type .feature.feature--featured::after {
content: '';
position: absolute;
bottom: 0;
width: 100%;
height: 4px;
background: #4a90e2;
left: 0;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-4">
<div class="feature feature--featured feature-1 boxed boxed--border bg--white">
<h5>This is a title</h5>
<p>
21 July, 2019
</p>
<a href="#">
Read Story
</a>
<span class="label">New</span>
</div>
</div>
<div class="col-md-4">
<div class="feature feature--featured feature-1 boxed boxed--border bg--white">
<h5>This is a title</h5>
<p>
21 July, 2019
</p>
<a href="#">
Read Story
</a>
<span class="label">New</span>
</div>
</div>
<div class="col-md-4">
<div class="feature feature--featured feature-1 boxed boxed--border bg--white">
<h5>This is a title</h5>
<p>
21 July, 2019
</p>
<a href="#">
Read Story
</a>
<span class="label">New</span>
</div>
</div>
</div>
Questions connexes
De nouvelles questions
css
CSS (Cascading Style Sheets) est un langage de feuille de style de représentation utilisé pour décrire l'apparence et la mise en forme des documents HTML (HyperText Markup Language), XML (Extensible Markup Language) et des éléments SVG, y compris (mais sans s'y limiter) les couleurs, la mise en page, les polices, et animations. Il décrit également comment les éléments doivent être affichés à l'écran, sur papier, dans un discours ou sur d'autres supports.