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

3 Comment centrer un div dans un petit écran ou très petit à l'aide de bootstrap
5 Appliquer le CSS en fonction de la condition
4 Existe-t-il un moyen d'écrire les textes dans un script document.write (''); en plusieurs lignes?
3 Un seul événement en cliquant sur l'étiquette avec entrée
3 Comment faire flotter la liste déroulante de la barre de navigation au-dessus de tous les éléments?
3 comment aligner les icônes dans la zone de texte dans react js?
3 La div imbriquée ne défilera pas
3 Comment ajouter un espacement entre les images dans Flexbox
3 Est-il possible de styliser une partie du texte en innerHtml en JavaScript?
3 Aligner les éléments Flexbox, React Material dans React
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.

css...