Трюки с child

_{Створюю і просуваю комерційні сайти та інтернет-магазини з 2008 року.} ^{9-11-2017, 01:09 1 140 0}

Для вибірки певних елементів в групі ширико можна використовувати селектор - child.

Наведу кілька прикладів як можна його використовувати:

Нагадаю, що це продовження статті про можливості викоритстання :nth-child та :nth-of-type.

- Читати початок

9) Вибрати першу силку і усі крім першої:

.knop a:first-child  {opacity:1;visibility:visible;}

/*Усі крім першої  */
.knop a:not(:first-child){opacity:0; visibility: hidden;}

10) При наведені на один елемент змінити інший (Увага! Інший елемент має бути в тому ж контейнері і нижче першого)

.knopka a:hover ~ .brassk{opacity:1;visibility:visible;}

11) Стилізувати тільки ті ul li, в яких немає класів взагалі:

ul:not([class]) li {color:red }

12)  Зміна зовнішнього вигляду всіх елементів, крім наведеного

ul:hover li:not(:hover) {opacity:0.5;}

13) Поставити символ перед кожним елементом окрім першого

.menu-item:not(:last-child):after {content: ' | ';}

14) Зручно для налагодження і самоконтролю шукати/підсвічувати картинки без alt, label без for й інші помилки.

/* підсвітка тег без необхідних атрибутів */
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;
}

15)Раніше текстових полів форм було не багато. Достатньо було написати:

select,
textarea,
[type="text"],
[type="password"] {
/* стилі для текстових полів вводу */
}

З появою нових типів полів в HTML5 цей список збільшився:

select,
textarea,
[type="text"],
[type="password"],
[type="color"],
[type="date"],
[type="datetime"],
[type="datetime-local"],
[type="email"],
[type="number"],
[type="search"],
[type="tel"],
[type="time"],
[type="url"],
[type="month"],
[type="week"] {
/* стилі для текстових полів вводу */
}

Замість перерахування 14 типів інпутів можна виключити 8 із них:

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"]) {
/* стилі для текстових полів вводу */
}

Підтримка

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

Коментарі