😎 » CSS3 » css3 примеры и описание их создания » Использование на практике :not
478 0  

Использование на практике :not

Псевдо-класс ":not" очень полезен в верстке когда нужно выбрать много одинаковых элементов кроме каких-то...


Примеры использование :not

/* выбрать все пункты без ховера */
ul:hover li:not(:hover) { }

 /* выбрать все пункты без класов */
ul:not([class]) li { }

/* выбрать все пункты без класа kolred */
p:not(.kolred) { color: red; }

/* подсвечиваем теги без необходимых атрибутов */
img:not([alt]),
label:not([for]),
input[type=submit]:not([value]) {outline:2px solid red;}

/* тревога, если первый child внутри списка не li и прочие похожие примеры */
ul > *:not(li),
ol > *:not(li),
dl > *:not(dt):not(dd) {outline:2px solid red;}


/* если первый елемент не имеет :after */
.menu-item:not(:last-child):after {content: ' | ';}


Следует заметить, что согласно спецификации в скобках селектора :not() может стоять только простой селектор и в скобках нельзя использовать сам селектор :not(). Если нужно исключить несколько элементов, :not() можно повторить несолько раз, как в примере:

select,
textarea,
[type]:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([type="image"]) 
{color:red;}



Залишити свій коментар:

Досвід у веброзробці:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2009
2023