CSS, псевдо класа, псевдо елемент: мишката, детето, мишената

Съчетавайки HTML и CSS, можете да управлявате абсолютно всички елементи на уеб страница. С помощта на стилове можете лесно да промените външния вид на всеки блок или линия. Често кодерът трябва да изпълнява по-сложна задача - да променя външния вид не на самия елемент, а на неговата индивидуална част или определена държава. В този случай псевдо-класовете на CSS са на спасение.

Псевдокласите работят по същия начин като редовните класове в маркирането, но те не присъстват физически на страницата. С тяхна помощ можете да изберете елементи въз основа на информацията, която не е в документа, която не може да бъде избрана с обичайния селектор. Ето един прост пример: имате червен бутон и искате да стане синьо, когато го задържите. Теоретично тя може да бъде приложена в jаvascript, но защо такава сложност? Много по-удобно е да се използва : задръжте CSS. С негова помощ можете да дадете на блока всички параметри, които ще работят само при накланянето на мишката.

Псевдокласният списък на CSS се актуализира редовно. Може би докато четете този материал, ще се появят няколко нови. Първо, нека да разгледаме онези, които се появиха в спецификацията на CSS3.

: n-ти тип

Да предположим, че имате списък, в който искате да използвате различни цвята, т.е., на първа линия е, например, написано с червени букви, а вторият - .. синьо, червено отново трети, четвърти отново в синьо. Преди това трябваше да създадете нови класове за това. Последните производители добавят всеки елемент от списъка към класа и след това променят външния си вид в стиловия лист. Не беше много удобно и замърсено оформлението.

Сега всичко е по-лесно. Използвайте псевдо класа CSS: nth-of-type. Това ще даде възможност да получите необходимия визуален ефект, без да променяте нищо в маркирането. Принципът на работа е прост: посочвате селектор и в скоби след името му напишете формула или ключова дума, която ще намери необходимите елементи. Например: nth-of-type (четно) ще намерите всички равномерни елементи и nth-of-type (странно) - странно. Има голям брой формули, които се използват за най-точен контрол. В скоби можете да посочите число - в който случай стиловете ще бъдат приложени към елемента, чийто индекс е равен на този номер.

: n-дете

Тази псевдоклас на CSS е подобна на предишната, но за разлика от нея работи изключително с децата на избрания елемент. Например, ако искате да го използвате, за да персонализирате появата на маркери

За прецизен контрол могат да се използват формули. Те са доста трудни за начинаещи, но си струва малко да се впишат в синтаксиса, как се опростяват нещата. Формулите изглеждат така: an + b, където a е множител, а b е компенсира. Например, ако посочите n в скоби, псевдокласът ще избере всички деца (защото не са посочени допълнителни условия под формата на a и b). Ако зададете n + 2, всички елементи ще бъдат избрани с изключение на първия (защото отместването е две). Най-добре е да проучим тази точка на практика. Експериментирайте с детските компоненти и различните формули.

: последно дете

Всичко е просто. Псевдокласовете за деца на CSS се използват за избор на конкретен елемент. Това избира последното дете на родителя. Използва се често, например, за да се подчертае последният ред на таблицата или да се премахне вдлъбнатината от последния блок, за да се избегне прехвърлянето й в следващия ред.

: n-последно дете

Съгласно принципа на действието е подобно на споменатото по-горе n-дете, но действа в обратна посока, т.е. когато се използват елементите, ще се премести отдолу нагоре. Това е полезно, ако искате да намерите последните няколко елемента.

Може би си мислите, че тези псевдо-класове и Псевдоелементи CSS са безполезни, защото можете да постигнете целта и с помощта на обикновени класове. Не е така. : n-детето: n-последното дете и техните аналози са много полезни при работа по големи проекти - например в случаите, когато блокът има огромен брой деца. Ръчното настройване на класовете е дълго и трудно.

Псевдо-класове държавно управление

Какво ще стане, ако трябва да промените външния вид на даден елемент в определено състояние? В този случай се предоставят псевдо-класове на CSS, насоки и други действия. Нека ги разгледаме по-подробно.

: връзка

Това е псевдо класа на CSS връзки, не само всички, но само тези, които все още не са били посетени. В него можете да посочите стилове за тези елементи , върху която потребителят все още не е превключил.

: посети

Аналог на предишната версия, която управлява само вече посетените връзки. Чрез комбинирането на тези две псевдо-класове можете да персонализирате външния вид на маркерите точно от начина, по който се нуждаете. Имайте предвид обаче, че състоянията се изчисляват за конкретни браузъри и се нулират след изчистване на историята.

Псевдоклас: целева CSS

Един от най-интересните псевдо-класове, които с правилна употреба до известна степен заменя използването на jаvascript. Той ви позволява да управлявате елемент, чийто идентификатор е посочен в адресната лента на страницата. Да, първи път е трудно да се разбере. Нека се опитаме да дадем пример.

Да приемем, че имаме 3 раздела на страницата с определени id: id1, id2, id3. Също така имаме три връзки със съответните стойности href: # id1, # ​​id2, # id3. Когато кликнете върху първата връзка в адресната лента на страницата след връзката към самата страница, ще се появи съответният идентификатор.

В CSS, за всички блокове div, дисплеят: none property е зададен, т.е. по подразбиране те не се показват. Използвайте целта: div и задайте своето изображение: block property. Сега, когато кликнете върху връзки с определени href, блокове със съответното id ще бъдат присвоени display: block, което означава, че те ще започнат да се появяват на страницата! При кликване върху връзката с href = "# id1" се показва блок с id1 и т.н.

Все още нищо не е ясно? Опитайте се да експериментирате. Създайте страница с горните маркировки и стилове. След няколко минути ще бъдете добре във всичко.

Псевдо-класове, които могат да бъдат приложени към всеки елемент

Повечето от описаните по-горе псевдо-класове изискват референции за работа. Все пак не всеки има нужда от елементи . Редица опции могат да бъдат приложени към абсолютно всяка част от страницата.

• : активен е предназначен за стилизирани елементи, върху които потребителят е кликнал върху левия бутон на мишката -
• : hover - CSS за елементите, на които потребителят задържа курсора -
• : фокус - за онези части от страницата, които понастоящем са фокусирани. Тази псевдоклас често се използва за работа с формуляри. Например, ако искате да маркирате входния низ за потребителското име, когато посетителят поставя курсора в него и започва да пише символи.

Не забравяйте, че: активната е активна само когато я натиснете. Непосредствено след като левият бутон на мишката спре да работи, присвоените с него стилове ще изчезнат и елементът ще се покаже, както е показано по подразбиране. В повечето случаи тази псевдоклас се използва за работа с бутони. Можете да ги настроите на голям брой държави. Например, по подразбиране бутонът ще бъде син, когато задържате курсора на мишката - зелен, когато е натиснат - червен и т.н.

Разбира се, псевдокласите се поддържат изцяло само от модерни браузъри. Например, в IE6 и 7, не можете да използвате фокус, и мишката и активната в IE6 работи само за справки. Да се ​​надяваме, че не е нужно да работите с такива браузъри и ако е необходимо, използвайте условни коментари.

Допълнителни псевдо-класове

Списъкът, изброен по-горе, не се ограничава до списъка. Благодарение на съвременния CSS можете да изберете само включените елементи (: активирани) или само деактивирани (: забранени), само отметнати квадратчета и радио (: checked). Накратко опишете още няколко опции, които можете да използвате, за да контролирате по-внимателно външния вид на съдържанието.

• : само-дете - способността да прилагате стил на елемент, който е единственият подвижен елемент -
• : lang - за работа с елементи, които имат език, зададен чрез lang-
• : root - използва се за избиране на коренния елемент. Следователно, в HTML, това е маркерът -
• : не е много мощен инструмент. Това прави възможно ограничаването на приложението на стилове до определени селектори. Ето един пример: .blue-color: not (span). Този селектор прилага стилове на всички елементи със синия цвят, ако не са .

Пълният списък с псевдо класове може да се простира за повече от една страница. Повечето машини използват само някои от тях на практика, предпочитайки да управляват държави, които използват jаvascript. Да, това е удобно, но съществуват редица точки, при които по-ефективните резултати могат да бъдат постигнати по-лесно, като се използва подходяща псевдоклас.