CSS: nth-of-type () et: not () sélecteur?
J'ai flotté articles côte à côte qui sont 25% à l'échelle. Je vais ajouter une clear:both
après chaque quatrième élément. Cependant j'ai besoin d'insérer un graphique de la section pause entre les éléments. Et il doit être à l'intérieur de la <ul>
. Pour être valide, j'ai enveloppé la section "break" (le premier li élément dans l'exemple ci-dessous) dans un <li>
.
<ul>
<li class="year"><h1>THIS IS A SECTION Break and 100% wide</h1></li>
<li>This is a article and only 25% wide</li>
<li>This is a article and only 25% wide</li>
<li>This is a article and only 25% wide</li>
<li>This is a article and only 25% wide</li>
</ul>
Je veux que chaque quatrième élément à un saut de ligne j'utilise donc ...
ul li:nth-of-type(4n+1) { clear: both; }
Cependant je veux le li.year
de ne pas être affectés par ce comportement, donc j'ai essayé cette
ul li:not(.year):nth-of-type(4n+1) { clear: both; }
Dès maintenant la dernière <li>
dans mon exemple de code ci-dessus se trouve dans la ligne suivante, mais qui ne devrait pas arriver depuis la première <li>
n'est pas l'un des flottait articles, mais contient un titre.
Est-il possible d'empiler le :not
et nth-of-type()
sélecteur sur uns des autres?
source d'informationauteur matt
Vous devez vous connecter pour publier un commentaire.
Le sélecteur vous avez -
-- est parfaitement correct (comme illustré en mettant en évidence le sélecteur).
Le problème avec la façon dont vous utilisez
clear
. Cela fonctionne si vous utilisezclear:right
, puisclear:left
sur l'élément suivant:Édition par commentaires touchées texte est un non-sens. Le vrai problème, comme par BoltClock réponse, c'est que le
:not
pseudo-classe n'a pas d'incidence surnth-of-type
. Réglage du sélecteur de décalage fonctionne dans ce cas, par coïncidence, mais ne pourrait pas fonctionner si le:not
configuration était différente.http://jsfiddle.net/8MuCU/
La raison de votre
:not()
qui ne fonctionne pas est parce que leli.year
est du même type d'élément que le reste de votreli
éléments (naturellement), de sorte:nth-of-type(4n+1)
correspond aux mêmes éléments, quelle que soit la.year
classe.Il n'est pas possible d'empiler les sélecteurs de manière séquentielle. C'est juste pas comment ils fonctionnent.
Puisque vous ne pouvez pas changer votre
li
éléments à quelque chose d'autre à cause de balisage HTML de règles, et:nth-match()
est dans un l'avenir spec et n'a pas encore été mise en œuvre, vous avez à faire avec la modification de votre:nth-of-type()
formule à adapter la structure à la place: