Combiner: premier type et: après

Question 1

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

Answer

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

Question 2

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

Combiner: premier type et: après

1 réponse

De nouvelles questions

Tags associés

css