Разликата между псевдо-класове и псевдо-елементи

Третият въпрос от тази статия 3 Things (Almost) No One Knows About CSS ми даде тон за писане – статията си струва отделеното време и тестовете към които реферира също. Повече документация от W3C за псевдо-класове и псевдо-елементи може да намерите тук.

Тъй като синтаксисът, с който се реферира към псевдо-елементите и псевдо-класовете е сходен може да създаде малко объркване. С представянето на CSS3 разликата между двете е малко по видима дори и в синтакиса, тъй като стандартът е псевдо-елементите да се изписват с две двуеточия (::), докато псевдо-класовете си остават с едно (:). IE8 не разпознава двете двуеточия, затова все още двете двуеточия не се използват засилено.

Псевдо-класове

Псевдо-класовете се използват, за да се достъпят/стилнат елементи при определени условия, например текстов линк, когато мишката мине върху него или първият елемент от определен тип.

динамични псевдо-класове
  • :link
  • :visited
  • :hover
  • :active
  • :focus
структурни псевдо-класове
  • :first-child
  • :nth-child(n)
  • :nth-last-child(n)
  • :nth-of-type(n)
  • :nth-last-of-type(n)
  • :last-child
  • :first-of-type
  • :last-of-type
  • :only-child
  • :only-of-type
  • :root
  • :empty
псевдо-класове за състояния на юзър интерфейс елементи
  • :enabled
  • :disabled
  • :checked
некатегоризирани псевдо-класове
  • :not(x)
  • :target
  • :lang(language)

Псевдо-елементи

Това е елемент, който не съществува в маркъпа (DOM-a), но може да бъде манипулиран почти като всеки друг такъв. Псевдо-елементите в CSS3 са:

  • ::before
  • ::after
  • ::first-letter
  • ::first-line

Измежду всички тези псевдо-елементи и класове има такива, които се налага да се използват рядко както и такива, които се използват непрекъснато. Придържайки се към идеята съдържанието да е отделено от стиловете, добра практика е ::before и ::after да се използват във всеки удобен случай. Отделно от това, с прилагането на повече креативност в употребата на тези два псевдо-елемента понякога се постигат много интересни резултати с малко редове css код.

Коментари през Facebook

Коментирай първи.

Остави коментар

Your email address will not be published. Required fields are marked *