Авторский знак. Авторский знак. Seosait21.ru Есть у человека надежда. Пока не поздно. Вгрызайся и изучай.

октябрь 2020
Пн Вт Ср Чт Пт Сб Вс
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31


Чувашия-это моя Россия

Псевдоселекторы в CSS.

(продолжение)

Помимо анкерных псевдоклассов, имеются дополнительные селекторы псевдоклассов :focus . Выбираются элементы, получившие фокус, например элемент формы, который был выделен и принимает от пользователя данные.

Пример:

                        input:focus {
                                   background-color: yellow;
                                   }

Селектор псевдокласса :first-child . Выбирается элемент, являющийся первым дочерним элементом родительского элемента. Этот селектор позволяет выбрать, например, первый абзац элемента div или первый элемент li в элементе ul.

Пример:

 
                        li:first-child {
                                   font-weight: bold;
                                   }

Селектор псевдокласса :lang( ). Выбирается элемент страниц сайта, для которого был указан язык. Этот селектор работает так же, как селектор атрибута lang|=, но может быть более надежным.

Пример:

                        р:lang(de) {
                                   color: green;
                                   }

Псевдоэлементы.

Селекторы псевдоэлементов работают так, как если бы они вставляли в структуру документа сайта фиктивные элементы для применения стилей. Псевдоэлементы, по сути, являются частями существующих элементов с учетом контекста, например первая строка или первое слово. В CSS 2.1 включено четыре псевдоэлемента: :first-line. Как предполагает само название, этот селектор применяет стилевое правило к первой строке указанного элемента. Свойства, которые можно применить к псевдоэлементу :first-line, ограничиваются следующими:

         
                        font 
                        background
                        word-spacing
                        letter-spacing
                        text-decoration
                        vertical-align 
                        text-TRansform
                        line-height
                        text-shadow

Следующий код добавляет дополнительный интервал между символами в первой строке текста каждого абзаца:

                        p:first-line (
                                  letter-spacing: 6pt;
                                  } 
                         :first-letter . 
                         
                    Стиль применяется к первой букве элемента.

Можно использовать только свойства font, color, background, margin, padding, border, text-decoration, vertical-align, text-transform, line-height И float. В CSS 2.1 к этому псевдоэлементу были добавлены свойства letter-spacing и word-spacing.

В следующем примере первая буква абзаца отображается крупным шрифтом и красным цветом:

                         р.opener:first-letter {
                                  font-size: 300%; 
                                  color: red;};

В CSS 2 появились два псевдоэлемента, вставляющих сгенерированные данные до :before и после :after указанного элемента и объявляющие стиль для этих данных. Данный код вставляет кавычки большого размера до и после длинной цитаты (&8220; и & 8 2 21; - это символьные сущности для левой и правой фигурной кавычки):

                          blockquote:before {
                                           content: "“"; 
                                           font-size: 24рx; 
                                           color: purple;
                                  } 
   
                          blockquote:after {
                                           content: "”"; 
                                           font-size: 24px; 
                                           color: purple;
                                           }

По написанию псевдоэлементов облегчает их синтаксис, по смыслу слова становиться ясно и понятно, что к чему, так что вопросов тут нет.


seosait21.ru
HTML

seosait21.ru
CSS

seosait21.ru
Web-диз.
HTML ссылка CSS ссылка ...

seosait21.ru
JavaScript

seosait21.ru
PHP

seosait21.ru
JQuery
JavaScript ссылка PHP ссылка JQuery ссылка

seosait21.ru
SEO.

seosait21.ru
MySQL

seosait21.ru
XML
... ... ...

обратно    назад    дальше     вперед

ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: