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

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

1 J'essaie d'ajouter mon bouton de fermeture à mes nouveaux éléments de liste, mais cela ne semble pas fonctionner
4 Changer le curseur sur n'importe quelle page de survol de texte
3 Pourquoi l'emballage flex-wrap n'est-il pas également?
1 Existe-t-il un moyen d'utiliser le dimensionnement de la boîte: boîte de bordure sans fixation de la largeur?
4 La couleur d'arrière-plan ne s'étend pas sur toute la largeur de l'écran
2 Comment puis-je empêcher le menu hamburger de mon site Web de laisser les gens faire défiler horizontalement
1 La compilation de Gatsby échoue avec google-fonts
3 Pourcentage CSS de transition (pour la barre de progression)
1 Comment empêcher le contenu de sortir du site Web?
2 Problème de lien entre les blocs de pseudo-éléments
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...