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!

css
0
morrits 5 nov. 2019 à 02:02

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>
1
Mr Lister 5 nov. 2019 à 07:16
58702276

Questions connexes

5 Problème d'élément positionné absolu dans une boîte relative avec une bordure sur un côté

De nouvelles questions

2 Comment centrer les bordures dans une autre case?
3 Comment changer le nom du mois anglais en arabe
2 Existe-t-il un moyen de mettre à l'échelle un SVG en ligne depuis l'extérieur de la balise <svg>?
2 Problème de bouton CSS Bootstrap, pas de changement de couleurs
3 <li> éléments mis en ligne lors du redimensionnement de ma fenêtre
2 Comment positionner le div absolu par rapport à un autre div
3 Comment voir les modifications de la page Web sans effacer le cache du navigateur?
3 Comment faire afficher l'image en tant qu'élément de bloc lorsque sa balise h2 à l'intérieur
3 Manipuler le contenu # pour tous les éléments div (avec role = "tabpanel") - style = "display: none;" pour afficher: bloquer;
2 Appliquer la propriété de rayon de bordure à la fenêtre du navigateur?
Toutes les questions sur css >

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.

Plus à propos css...