Cible spécifique div avec pseudo-élément

J'essaie de simplement cibler la troisième div dans mon code HTML avec une classe de .counter-wrap. Sur un appareil mobile, ce div a un margin-bottom de 40px. Je veux supprimer la marge inférieure sur le troisième div empilé nommé .counter-wrap.Cible spécifique div avec pseudo-élément

Je pensais que je pouvais simplement faire .counter-wrap: last-of-type mais la raison pour laquelle cela ne fonctionne pas, je crois, c'est parce que chaque .counter-wrap est dans sa propre classe .col. Est-ce que cela peut être fait avec un pseudo-élément ou serais-je mieux d'utiliser un identifiant unique sur le dernier div .counter-wrap et d'appliquer simplement margin-bottom: 0?

body { 
 
    color: black; 
 
    font-size: 15px; 
 
} 
 

 
.wrap { 
 
    width: 600px; 
 
    margin: 0 auto; 
 
} 
 

 
.container, 
 
.container-long { 
 
    padding-right: 15px; 
 
    padding-left: 15px; 
 
    margin-right: auto; 
 
    margin-left: auto 
 
} 
 

 
.row { 
 
    margin-left: -15px; 
 
    margin-right: -15px; 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -ms-flex-wrap: wrap; 
 
    flex-wrap: wrap; 
 
} 
 

 
.col { 
 
    position: relative; 
 
    padding-right: 15px; 
 
    padding-left: 15px; 
 
    -ms-flex-preferred-size: 100%; 
 
    flex-basis: 100%; 
 
} 
 

 
.counter-wrap { 
 
    margin-bottom: 40px; 
 
} 
 

 
.counter-text, 
 
.counter-number { 
 
    display: block; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    color: black; 
 
} 
 

 
.counter-text { 
 
    letter-spacing: normal; 
 
    font-weight: 400; 
 
} 
 

 
.counter-number { 
 
    font-size: 60px; 
 
    font-weight: 500; 
 
}

<div class="wrap"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col"> 
 
     <div class="counter-wrap"> 
 
      <span class="counter-text">Line1</span> 
 
      <span class="counter-number count">1234</span> 
 
      <span class="counter-text">Line 2</span> 
 
     </div> 
 
     </div> 
 
     <div class="col"> 
 
     <div class="counter-wrap"> 
 
      <span class="counter-text">Line1</span> 
 
      <span class="counter-number count">1234</span> 
 
      <span class="counter-text">Line 2</span> 
 
     </div> 
 
     </div> 
 
     <div class="col"> 
 
     <div class="counter-wrap"> 
 
      <span class="counter-text">Line1</span> 
 
      <span class="counter-number count">1234</span> 
 
      <span class="counter-text">Line 2</span> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Source

2017-09-22 rufus

pourrait vous s'il vous plaît marquer et upvote si cela a bien fonctionné pour vous? –

Les réponses données ont un gros défaut, la seconde c'est-à-dire que vous ajoutez un 4ème 'col' pour quelques infos supplémentaires, elles se cassent toutes. Définir une classe sur celle que vous voulez cibler fonctionnera toujours. – LGSon

Oui, je suis pleinement conscient de l'avoir signalé. Je ne vais plus ajouter 'cols' donc ça devrait être bien – rufus

Utilisez le sélecteur last-of-type sur la classe col comme ceci:

.col:last-of-type .counter-wrap { 
    margin-bottom: 0; 
}

Voir la démo ci-dessous:

body { 
 
    color: black; 
 
    font-size: 15px; 
 
} 
 

 
.wrap { 
 
    width: 600px; 
 
    margin: 0 auto; 
 
} 
 

 
.container, 
 
.container-long { 
 
    padding-right: 15px; 
 
    padding-left: 15px; 
 
    margin-right: auto; 
 
    margin-left: auto 
 
} 
 

 
.row { 
 
    margin-left: -15px; 
 
    margin-right: -15px; 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -ms-flex-wrap: wrap; 
 
    flex-wrap: wrap; 
 
} 
 

 
.col { 
 
    position: relative; 
 
    padding-right: 15px; 
 
    padding-left: 15px; 
 
    -ms-flex-preferred-size: 100%; 
 
    flex-basis: 100%; 
 
} 
 

 
.counter-wrap { 
 
    margin-bottom: 40px; 
 
} 
 

 
/*ADDED*/ 
 
.col:last-of-type .counter-wrap { 
 
    margin-bottom: 0; 
 
} 
 

 
.counter-text, 
 
.counter-number { 
 
    display: block; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    color: black; 
 
} 
 

 
.counter-text { 
 
    letter-spacing: normal; 
 
    font-weight: 400; 
 
} 
 

 
.counter-number { 
 
    font-size: 60px; 
 
    font-weight: 500; 
 
}

<div class="wrap"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col"> 
 
     <div class="counter-wrap"> 
 
      <span class="counter-text">Line1</span> 
 
      <span class="counter-number count">1234</span> 
 
      <span class="counter-text">Line 2</span> 
 
     </div> 
 
     </div> 
 
     <div class="col"> 
 
     <div class="counter-wrap"> 
 
      <span class="counter-text">Line1</span> 
 
      <span class="counter-number count">1234</span> 
 
      <span class="counter-text">Line 2</span> 
 
     </div> 
 
     </div> 
 
     <div class="col"> 
 
     <div class="counter-wrap"> 
 
      <span class="counter-text">Line1</span> 
 
      <span class="counter-number count">1234</span> 
 
      <span class="counter-text">Line 2</span> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Source

2017-09-22 12:23:17 kukkuz

Merci! Je savais que c'était quelque chose de simple. Fonctionne un régal – rufus

S'il vous plaît vérifier le code mis à jour. Vous avez seulement besoin de mettre à jour ce repos css, vous obtiendrez le résultat souhaité.

.wrap .col:last-child .counter-wrap { 
    margin-bottom: 0; 
}

body { 
 
    color: black; 
 
    font-size: 15px; 
 
} 
 

 
.wrap { 
 
    width: 600px; 
 
    margin: 0 auto; 
 
} 
 

 
.container, 
 
.container-long { 
 
    padding-right: 15px; 
 
    padding-left: 15px; 
 
    margin-right: auto; 
 
    margin-left: auto 
 
} 
 

 
.row { 
 
    margin-left: -15px; 
 
    margin-right: -15px; 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -ms-flex-wrap: wrap; 
 
    flex-wrap: wrap; 
 
} 
 

 
.col { 
 
    position: relative; 
 
    padding-right: 15px; 
 
    padding-left: 15px; 
 
    -ms-flex-preferred-size: 100%; 
 
    flex-basis: 100%; 
 
} 
 

 
.counter-wrap { 
 
    margin-bottom: 40px; 
 
} 
 

 
.counter-text, 
 
.counter-number { 
 
    display: block; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    color: black; 
 
} 
 

 
.counter-text { 
 
    letter-spacing: normal; 
 
    font-weight: 400; 
 
} 
 

 
.counter-number { 
 
    font-size: 60px; 
 
    font-weight: 500; 
 

 
} 
 

 
.wrap .col:last-child .counter-wrap { 
 
    margin-bottom: 0; 
 
}

<div class="wrap"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col"> 
 
     <div class="counter-wrap"> 
 
      <span class="counter-text">Line1</span> 
 
      <span class="counter-number count">1234</span> 
 
      <span class="counter-text">Line 2</span> 
 
     </div> 
 
     </div> 
 
     <div class="col"> 
 
     <div class="counter-wrap"> 
 
      <span class="counter-text">Line1</span> 
 
      <span class="counter-number count">1234</span> 
 
      <span class="counter-text">Line 2</span> 
 
     </div> 
 
     </div> 
 
     <div class="col"> 
 
     <div class="counter-wrap"> 
 
      <span class="counter-text">Line1</span> 
 
      <span class="counter-number count">1234</span> 
 
      <span class="counter-text">Line 2</span> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Source

2017-09-22 12:23:03

Merci! fonctionne comme un charme – rufus

Vous pouvez utiliser la règle nth-child(). Appliquez-le à l'élément parent, puis entrez le numéro de la classe enfant que vous souhaitez cibler. Dans ce cas, il serait

.col:nth-child(3) .counter-wrap { 
background:red; 
}

body { 
 
     color: black; 
 
     font-size: 15px; 
 
    } 
 

 
    .wrap { 
 
     width: 600px; 
 
     margin: 0 auto; 
 
    } 
 

 
    .container, 
 
    .container-long { 
 
     padding-right: 15px; 
 
     padding-left: 15px; 
 
     margin-right: auto; 
 
     margin-left: auto 
 
    } 
 

 
    .row { 
 
     margin-left: -15px; 
 
     margin-right: -15px; 
 
     display: -webkit-box; 
 
     display: -ms-flexbox; 
 
     display: flex; 
 
     -ms-flex-wrap: wrap; 
 
     flex-wrap: wrap; 
 
    } 
 

 
    .col { 
 
     position: relative; 
 
     padding-right: 15px; 
 
     padding-left: 15px; 
 
     -ms-flex-preferred-size: 100%; 
 
     flex-basis: 100%; 
 
    } 
 

 

 
    .counter-wrap { 
 
     margin-bottom: 40px; 
 
    } 
 

 
    .counter-text, 
 
    .counter-number { 
 
     display: block; 
 
     text-align: center; 
 
     text-transform: uppercase; 
 
     color: black; 
 
    } 
 

 
    .counter-text { 
 
     letter-spacing: normal; 
 
     font-weight: 400; 
 
    } 
 

 
    .counter-number { 
 
     font-size: 60px; 
 
     font-weight: 500; 
 

 
    } 
 

 

 
    .col:nth-child(3) .counter-wrap { 
 
     background:red; 
 
    }

<div class="wrap"> 
 
     <div class="container"> 
 
     <div class="row"> 
 
      <div class="col"> 
 
      <div class="counter-wrap"> 
 
       <span class="counter-text">Line1</span> 
 
       <span class="counter-number count">1234</span> 
 
       <span class="counter-text">Line 2</span> 
 
      </div> 
 
      </div> 
 
      <div class="col"> 
 
      <div class="counter-wrap"> 
 
       <span class="counter-text">Line1</span> 
 
       <span class="counter-number count">1234</span> 
 
       <span class="counter-text">Line 2</span> 
 
      </div> 
 
      </div> 
 
      <div class="col"> 
 
      <div class="counter-wrap"> 
 
       <span class="counter-text">Line1</span> 
 
       <span class="counter-number count">1234</span> 
 
       <span class="counter-text">Line 2</span> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div>

Source

2017-09-22 12:26:19 ProEvilz

Merci beaucoup – rufus

Cible spécifique div avec pseudo-élément

Répondre

Questions connexes