Как объединить псевдо-элементы с псевдо-классами?

как объединить псевдо-элементы, такие как :after С псевдо-классами, такими как :hover и :not?

li {
  margin-bottom: 10px;
}
li:after {
  content: '';
  display: block;
  width: 0;
  height: 3px;
  background: #009688;
  transition: width .8s;
}
li:hover:after {
  width: 100%;
}
<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
  <li>forth</li>
  <li>fifth</li>
</ul>

как я могу исключить, например, первый и третий элементы в списке из этого эффекта наведения?

6
css css-selectors css3 pseudo-class pseudo-element

2 ответов

вы можете :not() псевдо-класс :nth-child() селектор такой.

li {
  margin-bottom: 10px;
}
li:after {
  content: '';
  display: block;
  width: 0;
  height: 3px;
  background: #009688;
  transition: width .8s;
}
li:not(:nth-child(1)):not(:nth-child(3)):hover:after {
  width: 100%;
}
<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
  <li>forth</li>
  <li>fifth</li>
</ul>
6

нет никаких особых правил сочетания псевдо-классы и псевдо-элементы, кроме одного правила, которое говорит на сложный селектор может быть только один псевдо-элемент, и он должен появиться в самом конце. Псевдоклассы могут быть записаны в любом порядке-порядок простых селекторов не меняет значения составного селектора. Обратите внимание, что псевдо-элемент, в отличие от псевдо-класса, не является простым селектором.

вы можете написать любой из

li:not(:nth-child(1)):not(:nth-child(3)):hover:after

или

li:hover:not(:nth-child(1)):not(:nth-child(3)):after

или

li:hover:not(:nth-child(3)):not(:nth-child(1)):after

или, черт, даже

li:not(:nth-child(3)):hover:not(:nth-child(1)):after

и вы получите тот же результат (при условии, что браузер не глючит), пока :after, псевдо-элемент, появляется последнее (и li, сначала появится селектор типов).

по соглашению большинство авторов предпочитают размещать структурные псевдоклассы, такие как :nth-child(), перед динамическими псевдоклассами, такими как :hover. Но это совершенно личное. предпочтения; это не имеет значения для браузера.

6