CSS селектори псевдоелементи
Днес ще говорим за следните псевдоелементи:
::before - вмъква генерираното съдържание преди съдържанието на елемента
::after - вмъква генерирано съдържание след съдържанието на елемента
::first-letter - избира първата буква на елемент
Практически курс за оформление на адаптивен уебсайт от нулата!
Вземете курса и научете как да създавате модерни уебсайтове в HTML5 и CSS3
::first-line - избира първия ред на елемент
::selection - стилизира избрания от курсора текст
От тях елементите ::first-letter, ::first-line и ::selection засягат съдържанието, което е включено в източниците. Псевдоелементите ::before и ::after, от друга страна, вмъкват съдържание в документа, което не е в източника. Нека разгледаме по-отблизо всички псевдоелементи.
Забележка: синтаксис с едно двоеточие
Може да сте виждали версии на ::first-letter, ::first-line, ::before и ::after с едно двоеточие в стария CSS. В CSS2 тези псевдоелементи бяха посочени с еднократно двоеточие :. IE8 изисква синтаксис с едно двоеточие, въпреки че повечето други браузъри поддържат и двете. По-добре е да използвате синтаксиса с двойно двоеточие.
Псевдоелементи ::преди и ::след
Повечето псевдоелементи ви позволяват да изберете съдържание, което вече присъства в изходния документ, но не е дефинирано от езика (с други думи, вашия HTML). Обаче ::преди и ::след работа по различен начин. Тези псевдоелементи добавят генерирано съдържание към дървото на документа. Генерираното съдържание не съществува в HTML източника, но се изобразява.
Защо да използваме генерирано съдържание? Например, можете да маркирате задължителни полета на формуляра, като добавите съдържание след етикетите:
Задължителното поле на формуляра трябва да използва HTMLнеобходимо имущество. Тъй като тази информация вече е налична в DOM, ::before и ::after действат като помощници. Това не е критично съдържание, така че може да не бъде включено в изходния код.
Забележка: Генерирано съдържание и достъпност
Някои екранни четци и браузъри разпознават и четат генерирано съдържание, но повечето не. Не използвайте псевдоелементи ::before и ::after, за да предоставите генерирано съдържание за потребители с увреждания. Можете да прочетете повече за този проблем в статията на Леони Уотсън Поддръжка за достъпност за CSS генерирано съдържание.
Друг начин за използване на ::before и ::after е да добавите префикс или суфикс към съдържанието. Горният формуляр може да използва помощен текст като по-долу:
Нека оградим нашия спомагателен текст в двойки скоби с ::before и ::after.
Може би най-полезната употреба на ::before и ::after е за почистване на плаващи елементи. Nicolas Gallagher представи тази техника (която се основава на работата на Thierry Koblentz) в публикацията си „new micro clearfix hack“:
В този случай стиловете за ::first-letter ще бъдат приложени както към началния цитат, така и към първата буква, както е показано по-долу. Стиловете се прилагат по един и същи начин във всички браузъри.
Резултатът обаче ще бъде различен, когато препинателният знак се генерира от елемента. Помислете за следното маркиране:
Понастоящем браузърите изобразяват маркера q като специфични за езика кавички, които ще се отварят и затварят. Въпреки това, не всички браузъри разпознават подобни цитати по един и същи начин. Във Firefox 42 (вижте по-долу), Safari 8 и по-стари, ::first-letter променя само началния цитат.
в хром,Opera и Yandex началният цитат на маркера q и първата буква на абзаца не са стилизирани. По-долу е екранна снимка в Chrome.
IE прилага стилове както към началния цитат, така и към първата буква на абзаца. Виж отдолу.
Спецификацията на CSS Pseudo-elements Module Level 4 гласи, че препинателният знак пред или непосредствено след първата буква или знак трябва да бъде стилизиран. Спецификацията обаче не обяснява ясно как да се прилагат стилове към генерираните препинателни знаци.
Грешки в браузъра при използване на ::първа буква
В по-голямата си част ::first-letter работи точно както се очаква във всички браузъри. Както при всички CSS свойства, този псевдоелемент има няколко грешки и злоупотреби, за които трябва да знаете.
Във Firefox 39 и по-стари някои знаци карат Firefox да игнорира правилото ::първа буква: -,$,^,_,+,`,