Як розібратися в CSS

377
  • Можливості псевдокласу nth-child
  • Інші приклади використання nth-child
  • Здрастуйте, шановні читачі блогу . Вирішив написати невеликий пост по темі використання CSS в цілях поліпшення сприйняття відвідувачами сайту.

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

    Як розібратися в CSS

    Подібну практику дуже часто застосовують при стильовому оформленні таблиць, коли хочуть підвищити наочність виведеної інформації. По ходу пошуку рішення виявилося, що ця задача вирішується досить просто і засобами одного лише CSS.

    Не потрібно позначати класами парні і непарні елементи списку (праве меню у мене на основі маркованого Html списку функціонує). Достатньо лише дописати пару рядків коду з використанням псевдокласу nth-child файл CSS, який відповідає за стильове оформлення сайту. Однак, nth-child має і масу інших застосувань, про що теж не премину згадати в пості.

    Можливості псевдокласу nth-child та його застосування на сайті

    Власне, після анонсування псеводкласса nth-child можна було б посаду і завершувати, бо ви й самі можете нагуглити масу інформації з нього. Але це не наш шлях, тому продовжимо. Отже, спочатку я опишу свої дії по перетворенню правого меню в «смугасте». Досить було з’ясувати за допомогою вбудованих в браузери інструментів для розробників (викликається з контекстного меню потрібного елемента на веб-сторінці вибором пункту подібного «Перегляд код елемента») в якому місці файлу стилів задається зовнішній вигляд рядків цього списку.

    Принцип роботи з інструментами розробників аналогічний тому, що я описував у статті про Фаербаг. Клікаєм правою кнопкою по будь-якого пункту в лівому меню мого блогу і дивимося на панелі результуючий звіт:

    Як розібратися в CSSЯк розібратися в CSS

    Зліва ви побачите Html код цього елемента (нас цікавить елемент з тегами LI — рядок списку), а в правій колонці наведено CSS правила, які браузер використовує для його стильового оформлення. Де знаходиться стильовий файл ви зможете негайно дізнатися, підвівши курсор миші до його назви.

    У моєму випадку це буде файл style.css з папки з вашою темою оформлення, який можна відкрити підключившись до сайту по ФТП і пройшовши по наступному шляху (правити файли шаблону з адмінки WordPress я б не радив, бо немає можливості зробити крок назад, як це дозволяє, наприклад, Нотепад++).

    /wp-content/themes

    Власне, на панелі інструментів для розробників в області CSS стилів ви навіть рядок знайдете, на якій потрібне правило прописано в файлі стилів. У моєму випадку це 281 рядок. Тому, відкривши style.css в Нотепаде (він у мене призначений редактором за промовчанням для всіх файлів, які зустрічаються в движку сайту), я на цю рядок негайно перемістився.

    Як розібратися в CSSЯк розібратися в CSS

    І дописав відразу під нею ще кілька правил з псевдоклассом hover (це правило відповідає за зміну кольору фону рядка правого меню, коли прямо над нею знаходиться курсор миші — це робить меню більш «живим», чи що) і з згаданим вище псевдоклассом nth-child. Якщо про hovver ми вже говорили (див. посилання трохи вище), то про nth-child поговоримо зараз. Якщо звернули увагу, що в круглих дужках для цього псевдокласу прописаний параметр 2n.

    nth-child(2n)

    У загальному вигляді значення цього псевдокласу nth-child задається з допомогою виразу: an+b, де a і b — цілі числа, а n — лічильник, що приймає цілі значення від 0 і більше: 0,1,2,3… В нашому випадку при зміна лічильника n ми будемо отримувати цифри 0, 2, 4, 6 і т. д. Це означає, що призначене для цього псевдокласу властивість (в нашому випадку це правило для завдання фону рядка списку за допомогою background-color) nth-child (2n) дозволить замінити фон парних рядків у списку на #E4F2FA.

    Цей шістнадцятковий формат запису коду кольору використовується в css і Html найбільш часто. Для пошуку підходящих кольорів я використовував програму Contrast Analyser 2.0, описану за наведеним посиланням. Вона дозволяє захопити колір з екрана і підібрати його більш світлі тони, що я, власне, і зробив.

    Як розібратися в CSSЯк розібратися в CSS

    Для фону рядка меню, при наведенні на них курсором миші (псевдоклас hover), я вибрав ще більш світлий відтінок з того ж ряду.

    Інші приклади використання nth-child

    Якщо захочете змінити фон або яким ще чином впливати на зовнішній вигляд непарних рядків (наприклад, додати їм відступи, збільшити шрифт або зробити ще щось непристойне), то використовуйте вираз nth-child (2n+1). Можете перевірити, підставляючи замість n цілі числа, починаючи з нуля, ви отримаєте в результаті тільки непарні числа. Можна використовувати відразу обидва варіанти (для парних і непарних рядків списків, таблиць або чого-небудь ще).

    Ще кілька прикладів використання nth-child для виділення різних рядків списків, таблиць і тому подібних елементів:

  • Для знущання над непарними елементами можна використовувати замість показаного вище вираження nth-child (odd), а для парних — nth-child (even).
  • Якщо захочете внести зміни тільки в четвертий рядок? то допишіть до CSS правилом через двокрапку псевдоклас: nth-child (4).
  • Хочете змінити вид рядків починаючи з дев’ятої? Немає проблем — nth-child (n+9).
  • Якщо хочете навпаки, виділити тільки перші дев’ять елементів, то скористайтеся конструкцією nth-child (-n+9).
  • Хочете виділити елементи починаючи з дев’ятого по вісімнадцятий — додайте складовою псевдоклас :nth-child (n+9):nth-child (-n+18). Чиста логіка.
  • Хочете зробити те ж саме, що і в попередньому пункті, але при цьому виділити в цьому діапазоні тільки парні рядки? Так немає проблем — :nth-child (n+9):nth-child (-n+18):nth-child (even).
  • Ну ось десь так. Штука може виявитися вельми корисною. У всякому разі, мені знадобилася.

    Удачі вам! До зустрічей на сторінках блогу