Розробка, підтримка, SEO, просування, соцмережі та реклама сайтів ☣
Кабінет клієнта
Зареєструватись Забули пароль?

Трюки с child

Створюю і просуваю комерційні сайти та інтернет-магазини з 2008 року. 9-11-2017, 01:09 685 0
Трюки с  child

Для вибірки певних елементів в групі ширико можна використовувати селектор - 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.


 
 


Коментарі

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

  • оновити, якщо не видно коду

Тарифні плани

Потужний старт Стандартний запуск сайту від $400
  • - ♜ -
  • В стартовий тарифний план входить:

  • Розробка та налаштування сайту
  • Семантичне ядро
  • Оптимізація швидкості
  • Наповнення до SEO 5 сторінок
  • Ліцензія двигунчика DLE
Просунутий SEO оптимізований сайт від $700
  • - ♚ -
  • В SEO тарифний план входить:

  • Створення та налаштування сайту
  • Семантичне ядро
  • Оптимізація швидкості
  • Наповнення до SEO 10 сторінок
  • Ліцензія двигунчика DLE
  • 5 силок + перелінковка
Імперський винущувач конкурентів від $999
  • - ♛ -
  • В імперський тарифний план входить:

  • Розробка сайту
  • Наповнення до SEO 20 сторінок
  • Повна оптимізація
  • Ліцензія двигунчика DLE
  • МОЄ НАТХНЕННЯ та ДОСВІД!
/* soc-knopki */