Остаточне керівництво до псевдо-класів CSS
Якщо ви новачок або досвідчений розробник CSS, ви, мабуть, чули про псевдокласи. Напевно, найвідоміший псевдоклас : hover, що дозволяє нам стилювати елемент, коли він є у стані наведення, тобто, коли вказівний пристрій, такий як миша, вказується на нього.
Слідуючи концепції наших попередніх посад на полях: auto та CSS Floats, ми розглянемо псевдокласи в цій посаді ближче. Побачимо які псевдо-класи насправді є, як вони працюють, як ми можемо їх класифікувати, і як вони відрізняються від псевдоелементів.
Що таке псевдокласи?
Псевдоклас - це ключове слово, яке ми можемо додати до селекторів CSS для того, щоб визначити особливий стан відповідного HTML-елемента. Ми можемо додати псевдо-клас до селектора CSS, використовуючи синтаксис двокрапки : подобається це: a: hover …
Клас CSS - це атрибут, до якого ми можемо додати елементи HTML, для яких потрібно застосувати ті ж правила для стилів, як пункти верхнього меню або заголовки віджетів бічної панелі. Іншими словами, ми можемо використовувати класи CSS групувати або класифікувати елементи HTML подібні так чи інакше.
Псевдокласи подібні їм у тому сенсі, що вони також є використовується для додавання правил стилю до елементів, які мають однакову характеристику.
Але поки справжні класи є визначений користувачем і можуть бути помічені у вихідному коді, наприклад The робота регулярних класів CSS це до класифікувати або групувати елементи. Розробники знають, як групувати їх елементи: вони можуть формувати класи, як "пункти меню", "кнопки", "мініатюри" і т.д. Ці класифікації базуються на характеристиках елементів дають самі розробники. Наприклад, якщо розробник вирішить використовувати a Однак елементи HTML мають власні загальні характеристики ґрунтується на їхньому стані, положенні, природі та взаємодії з сторінкою та користувачем. Це ті характеристики, які є ні зазвичай позначені в HTML-коді, але ми можемо націлюйте їх на псевдокласи у CSS, наприклад: Це такі характеристики, які, як правило, націлені на псевдокласи. Щоб краще зрозуміти різницю між класами і псевдо-класами, припустимо, що ми використовуємо клас Ми можемо стилізувати ці останні дочірні елементи за допомогою таких CSS: Але що відбувається, коли змінюється останній елемент? Ну, нам доведеться перенести Це клопоту Оновлення класів можна залишити користувальницькому агенту, принаймні для тих характеристик, які є загальними серед елементів (а останнім елементом є настільки поширені, наскільки це можливо). Маючи попередньо визначений Існує багато видів псевдо-класів, всі вони надають нам способи націлювання на елементи на основі їхніх можливостей, які в іншому випадку недоступні або складніші для доступу. Ось список стандартних псевдоклассів у MDN. Динамічні псевдокласи додаються до елементів HTML і видаляються з них динамічно, на основі стану, в який вони переходять у відповідь на взаємодію користувача. Деякі з прикладів динамічних псевдоклас Державні псевдокласи додаються до елементів, коли вони є в певному статичному стані. Деякі з найбільш відомих прикладів: Найбільш популярний державний псевдо-клас має бути Структурні псевдокласи класифікують елементи на основі на їхню позицію в структурі документа. Найбільш поширеними прикладами є Існують також різні псевдокласи, які важко класифікувати, такі як: Одним з найважчих речей про псевдо-класах, ймовірно, є розуміння різниці між ними Обидва - це структурні псевдокласи і позначення певний елемент всередині батьківського елемента (контейнер), але по-іншому. Припустимо n тоді 2 Давайте подивимося на приклад. Давайте подивимося, як цей короткий CSS стилю HTML у двох різних випадках. У випадку 1, другий елемент всередині a Але якщо батьківський елемент робить мати другий абзац У нашому прикладі Параграф 1, Дитина 1 Параграф 2, Дитина 3 У другому випадку ми переміщуємо невпорядкований список на третє місце, а другий - перед ним. Це означає, що обидва Параграф 1, Дитина 1 Параграф 2, Дитина 2 Якщо ви хочете прочитати більше про відмінності між Коли ми говоримо про псевдокласи, важливо також розуміти як вони відрізняються від псевдоелементів, щоб не змішувати їх. Але поки ми використовуємо псевдо-класи для вибору HTML-елементів, які існують у дереві документів просто не позначені окремо, псевдоелементи дозволяють орієнтуватися на елементи, які зазвичай не існує в DOM, або взагалі (наприклад Там також a різниця в синтаксисі. Псевдоелементи зазвичай ототожнюються з подвійними двокрапками Це може призвести до плутанини, оскільки в CSS2 псевдоелементи також були позначені єдиною двокрапкою - браузери все ще приймають синтаксис одинарного двокрапки для псевдоелементів. Існують також відмінності між псевдо-класами і псевдо-елементами в як ми можемо націлити їх на CSS. Псевдоелементи можуть тільки з'являтися після послідовність селекторів, тоді як псевдокласи можуть бути розміщені в будь-якій послідовності селектора CSS. Наприклад, ви можете націлити на останній елемент списку елемент списку АБО Перша послідовність селектора вибирає останню дитину всередині Спробуємо зробити щось подібне з псевдоелементами. Наведений вище код CSS є дійсним, і з'явиться текст "червоний" після Цей код, з іншого боку, не буде працювати, як ми не може змінити положення псевдоелемента всередині послідовності селектора. Крім того, тільки один псевдоелемент може з'явитися поруч з селектором, тоді як псевдокласи можуть комбінуватися один з одним якщо комбінація має сенс. Наприклад, для націлювання на перші дочірні елементи, які також доступні лише для читання, ми можемо створити комбінацію псевдо-класів Код селектора з a Важливо знати це вони є ні Псевдокласи CSS які націлені на jQuery. Вони називаються розширеннями селектора jQuery. Розширення селектора jQuery дозволяють вам націлюйте елементи HTML на більш прості ключові слова. Більшість з них є комбінаціями декількох звичайних CSS-селекторів, які представлені одним ключовим словом.Призначення псевдокласів
.останній ідентифікувати останні елементи в різних батьківських контейнерах.
li.last текст-перетворення: верхній регістр; option.last font-style: курсив;
.останній клас від попереднього останнього елемента до поточного.: остання дитина псевдоклас дуже корисна. Таким чином, ми не потрібно вказувати останній елемент в HTML-коді, але ми все ще можемо створювати їх за допомогою таких CSS: li: last-child text-transform: верхній регістр; опція: last-child font-style: курсив;
Основні типи псевдокласів
1. Динамічні псевдокласи
: hover, : фокус, : посилання, і :відвідав, всі вони можуть бути додані до якірний тег. a: visit color: # 8D20AE; .button: hover, .button: focus font-weight: bold;
2. Державні псевдокласи
: перевірено які можна застосувати для прапорців ():повноекранний націлювання на будь-який елемент, який наразі відображається в повноекранному режимі: вимкнено для елементів HTML, які можуть перебувати у вимкненому режимі, наприклад , , і . : перевірено, який позначає, чи встановлено прапорець чи ні. .прапорець: check + label font-style: italic; input: disabled background-color: #EEEEEE;
3. Структурні псевдокласи
: перша дитина, : остання дитина, і : n-та дитина (n) - всі можуть бути використані для націлювання на певний дочірній елемент всередині контейнера на основі його позиції - і : root яка орієнтована на батьківський елемент найвищого рівня в DOM. 4. Різні псевдокласи
: немає (x) який вибирає елементи, які не збігаються з селектором x: lang (мовний код) що вибирає елементи, зміст яких знаходиться на певній мові: dir (напрям) що вибирає елементи з вмістом заданої спрямованості (зліва направо або справа наліво). p: lang (ko) колір тла: # FFFF00; : root колір фону: # FAEBD7;
n-й дитина проти n-го типу Псевдокласи
: n-й дитина і : n-го типу псевдокласи.: n-ої дитини (n) націлює елемент, який є друга дитина свого батьківського елемента, і : nth-of-type (n) цілей другий серед одного типу елемента (наприклад, абзаци) всередині батьківського елемента. / * абзац, який також є другою дитиною у його батьківському елементі * / p: nth-child (2) color: # 1E90FF; // lightblue / * другий параграф всередині батьківського елемента * / p: nth-of-type (2) font-weight: bold;
Випадок 1
n-та дитина (2) правило не застосовується до нього. Хоча це друга дитина, вона є ні абзац. nth-of-type (2) Правило буде застосовуватися, оскільки це правило тільки шукає інших елементів типів елементів (наприклад, невпорядкованих списків) всередині батьківського елемента.nth-of-type (2) Правило буде стилю другого абзацу, який є дитиною 3.
Невпорядкований список 1, дитина 2
Випадок 2
: n-та дитина (2) \ t і : nth-of-type (2) Правила будуть застосовуватися, тому що другий абзац також є другою дитиною свого батька
Невпорядкований список 1, дитина 3
: n-ої дитини і : n-го типу псевдо-класи, CSS Tricks має великий пост на ньому. Якщо ви використовуєте SASS, Family.scss може допомогти вам створити складний n-й дитина'. \ t.Псевдокласи проти псевдоелементів
Псевдоелементи, як от :: раніше і :: після (див. цей підручник про те, як їх використовувати) додані користувальницькими агентами, і вони можуть бути націлені на CSS також, як і псевдокласи. :: раніше і :: після) або лише як певні частини існуючих елементів (напр :: перша буква або :: placeholder). ::, тоді як псевдокласи ототожнюються з однією двокрапкою :.1. Їх місце в послідовності селектора CSS
ul>: last-child.red color: # B0171F;
ul> .red: остання дитина color: # B0171F;
.червоний), а друга вибирає останню дитину серед елементів, що володіють .червоний клас всередині ul> .red :: after display: block; зміст: 'червоний'; колір: # B0171F;
пунктів з класом .червоний. ul> :: after.red display: block; зміст: 'червоний'; колір: # B0171F;
2. Кількість випадків у послідовності селектора
: перша дитина і :лише для читання наступним чином: : first-child: read-only color: #EEEEEE;
Розширення селектора jQuery
: Синтаксис не завжди є правильним псевдо-класом CSS. Якщо ви коли-небудь використовували jQuery, можливо, ви використовували багато його селекторів : наприклад, синтаксис $ (': прапорець'), $ (': input') і $ (': вибрано'). / * Зміна шрифту всіх пов'язаних з введенням елементів HTML, наприклад кнопки, вибору та введення * / $ (": input") .css ("шрифт-сім'я", "кур'єр новий")
