Всем привет, хабрчане. Сегодня CSS окружает нас вокруг, и даже маломайский программист должен понимать его. Самыми используемыми являются старые добрые #id и .class они знакомы всем, кто хоть раз работа с CSS. На этом конечно мир Селекторов далеко не ограничивается. Я уже довольно давно работаю с CSS и хочу поделится как можно большим количеством полезных селекторов. Все они определяют стиль того или иного объекта.
CSS Selectors
Объясняю многие селекторы применимо к указанному примеру.
.class
(Пр. .main) Данный селектор объединяет все элементы с классом «main». Родился он давно и активно учувствует в разработке.
#id
(Пр. #Block_Form) Этот селектор объедение элементы с В чем скажите разница между .class и #id — а разницу можно понять на примере: то что ПАСПОРТНЫЙ НОМЕР = id, ФАМИЛИЯ = class. Также немало важно то, что — Идентификатор (id) можно вызвать из скрипта используя функцию GetElementById, в отличие от класса. Класс может быть использован многократно, идентификатор же должен быть уникальным.
element
(Пр. p ) Объединяет все элементы тега p.
element,element
(Пр. div,p) Объединяет все элементы div и все элементы p . Так же в эту группу можно выделить похожие селекторы:
(Пр. div>p) Объединяет все p для которых родителем выступает div.
element+element
(Пр. div+p) Объединяет все p которые расположены сразу после div.
[attribute]
(Пр. [target]) Объединяет все элементы с атрибутом target
[attribute=value]
(Пр. [target=_blank]) Объединяет все элементы с заданным target=»_blank»
[attribute~=value]
(Пр. [title~=Apple]) Объединяет все элементы, которые в своем title содержат «Apple»
[attribute|=value]
(Пр. [class|=top]) Объединяет все элементы с атрибутом class начиння с «top»
Все теги написаны были без «<>«.
Дальше считаю обязательно нужно показать именно эти селекторы, так как они являются очень важными и крайне часто используются в решении многих задач — от Простых анимашек с наведением курсора, оформлением ссылок, картинок и прочего до более глобальной цели уменьшения кода в целом.
Так же их называют Псевдокласы:
:link
:visited
:active
(Пр. a:active) Псевдокласс :active определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее.
:hover
:focus
(Пр. input:focus) Изменяет стиль при фокусировке. на практике часто используется для подсветки полей формы при фокусировке на нем
:first-letter
:first-line
(Пр. p:first-line) Определяет стиль первой строки. Использую для изменения цвета текста, цвета фона и шрифта, но как показывают народные хабрумельцы на этом его функции не ограничиваются
:first-child
(Пр. p:first-child) Что бы просто объяснить — применяет стилевое оформление к первому дочернему элементу своего родителя. В примере если р есть первым элементом своего родителя Дальше идут два очень интересных класса:
:before
:after
(Пр. p:after) Они применяются в тех случаях, когда — нужно отобразить нужный контент до или после содержимого элемента, к которому он добавляется. Работает совместно со свойством content:. Так же я их использую как дополнительные элементы вместо div, в таком случае нужно прописывать content:»»;. Также нужно помнить о том, что при добавлении :before к блочному элементу, значение свойства display может быть только: block, inline, none, list-item. Все остальные значения будут трактоваться как block. При добавлении :before к встроенному элементу, display ограничен значениями inline и none. Все остальные будут восприниматься как inline. :before наследует стиль от элемента, к которому он добавляется.
:lang(language)
(Пр. p:lang(it)) Довольно простой, но порой нужный элемент — для примера: Определяет стиль каждого p с атрибутом lang, значение которого начинается с «it»
Селекторы CSS3
Данные селекторы вызывают большой интерес, так как они мало кем используются и, конечно, хочется разобраться как ими пользоваться, поэтому буду приводить примеры. Также в данной группе селекторов в многострадальном IE8 и раньше DOCTYPE должен быть объявлен.
element1~element2
Устанавливает цвет фона для всех ul элементов, которые предшествуют p с таким же родителем. Грубо говоря — на этом примере, красным будет бэкграунд только у тех «списков» которые стоят после родителя тега р.
а в этом случае поля Айтемов будут иметь бэк-цвет — красный.
[attribute^=value]
(Пр. a[src^=«https»]) По примеру определяет стиль каждого a для которого значение элемента src начинающегося с «https». Вот еще пример:
[class^="test"]
item1
item2
item3
item4
Проще говоря – данный селектор дает возможность установить цвет фона на всех div элементов, которые имеют значение атрибута класса, начинающихся с «тест» – а именно item3, item4.
[attribute$=value]
(Пр. a[src$=».pdf»]) Выбирает каждый тег a, для которого SRC значение атрибута заканчивается на «. PDF. И вот еще один наглядный пример:
div[class$="test"]
Item1
Item2
Item3
Item4
На этом примере очень хорошо будет видно использование данного селектора, а именно в Красный цвет перекрасятся Item1 (по тому что класс заканчивается на _test) и item3.
[attribute*=value]
(Пр. a[src*=«w3schools»]) Выбирает каждый тег a, для которого значение атрибута SRC содержит подстроку «w3schools».
div[class*="test"]
item1
item2
item3
item4
В этом примере результатом будут закрашенные строки item1, item3, item4.
Дальше перейдем к псевдоклассам
:first-of-type
(Пр. p:first-of-type) Задает правила стилей для первого элемента в списке дочерних элементов своего родителя.
:last-of-type
(Пр. p:last-of-type) Соответственно задает правила стилей для последнего элемента в списке дочерних элементов своего родителя.
:only-of-type
(Пр. p:only-of-type) А вот этот применяется к дочернему элементу указанного типа, только если он единственный у родителя. Аналогично как :first-of-type:last-of-type или :nth-of-type(1):nth-last-of-type(1).
:only-child
(Пр. p:only-child) Такой элемент применяется по примеру к дочернему элементу p, только если он единственный у родителя
Следующие два можно также неплохо использовать для определенной последовательности – нечетные (odd), четные(even) или число(1,2,3… или выражения 2n+1), заданные в (Х):
:nth-child(n)
, который является вторым дочерним элементом у родителя.
:nth-last-child(n)
(Пр. p:nth-last-child(2)) Тот же смысл, что и у предыдущего, кроме того, что отсчет ведется не от первого элемента, а от последнего.
:nth-of-type(n)
(Пр. p:nth-of-type(2)) Используется для добавления стиля к элементам указанного типа на основе нумерации. Например, для картинок у заглавия применить со значением Float: -left or –right.
:nth-last-of-type(n)
(Пр. p:nth-last-of-type(2)) Тоже, что и предыдущий, но отсчет ведется не от первого элемента, а от последнего.
:last-child
(Пр. p:last-child) Данный селектор задает стилевое оформление последнего элемента своего родителя.
:root
:empty
:target
(Пр.#news:target) Грубо говоря – это определение на основе целевого элемента. В примере определение текущего id — #news element. Используется для URL.
:enabled
(Пр. input:enabled) Применяется к формам, как доступ к доступным (не заблокированным — disabled) элементам форм, простите за тавтологию.
:disabled
:checked
(Пр. input:checked) Данный псевдокласс применим к элементам интерфейса, таким как переключатели (checkbox) и флаги (radio), когда они включены, конечно же.
:not(selector)
(Пр. :not(p)) На примере стиль применяется ко всем элементам, которые не p. В качестве селектора могут быть псевдоклассы, теги, идентификаторы, классы и селекторы атрибутов.
Этот курс научит Вас созданию самых разных сайтов на самой популярной в мире CMS — WordPress. Вы увидите установку и настройку локального сервера, разбор каждой настройки, каждой кнопки и каждого пункта меню в панели WordPress.
Также Вы получите и всю практику, поскольку прямо в курсе с нуля создаётся полноценный Интернет-магазин, который затем публикуется в Интернете. И всё это прямо на Ваших глазах.
Помимо уроков к курсу идут упражнения для закрепления материала.
И, наконец, к курсу идёт ценнейший Бонус по тому, как используя ChatGPT и создавая контент для сайта, можно выйти на пассивный доход. Вы наглядно увидите, как зарегистрироваться в ChatGPT (в том числе, и если Вы из России), как правильно выбрать тему для сайта, как правильно генерировать статьи для него(чтобы они индексировались поисковыми системами) и как правильно монетизировать трафик на сайте.
Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.
Подписаться
Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.
Подписаться
Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.
Мой аккаунт Моя группа
Какая тема Вас интересует больше?
— Вы получите необходимую базу по Unreal Engine 5
— Вы познакомитесь с множеством инструментов в движке
— Вы научитесь создавать несложные игры
Общая продолжительность курса 4 часа, плюс множество упражнений и поддержка!
Чтобы получить Видеокурс, заполните форму
Как создать профессиональный Интернет-магазин
— Вы будете знать, как создать Интернет-магазин.
— Вы получите бесплатный подарок с подробным описанием каждого шага.
— Вы сможете уже приступить к созданию Интернет-магазина.
In CSS, ::after creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
Try it
Note: The pseudo-elements generated by ::before and ::after are contained by the element’s formatting box, and thus don’t apply to replaced elements such as , or to elements.
Syntax
Note: CSS introduced the ::after notation (with two colons) to distinguish pseudo-classes from pseudo-elements. For backward compatibility, browsers also accept :after , introduced earlier.
Examples
Simple usage
Let’s create two classes: one for boring paragraphs and one for exciting ones. We can use these classes to add pseudo-elements to the end of paragraphs.
HTML
pclass="boring-text">Here is some plain old boring text.p>p>Here is some normal text that is neither boring nor exciting.p>pclass="exciting-text">Contributing to MDN is easy and fun.p>
We can style text or images in the content property almost any way we want.
HTML
spanclass="ribbon">Look at the orange box after this text. span>
CSS
.ribbon background-color: #5bc8f7;>.ribbon::aftercontent:"This is a fancy orange box.";background-color: #ffba10;border-color: black;border-style: dotted;>
Result
Tooltips
This example uses ::after , in conjunction with the attr() CSS expression and a data-descr custom data attribute, to create tooltips. No JavaScript is required!
We can also support keyboard users with this technique, by adding a tabindex of 0 to make each span keyboard focusable, and using a CSS :focus selector. This shows how flexible ::before and ::after can be, though for the most accessible experience a semantic disclosure widget created in some other way (such as with details and summary elements) is likely to be more appropriate.
HTML
p> Here we have some spantabindex="0"data-descr="collection of words and punctuation"> text span> with a few spantabindex="0"data-descr="small popups that appear when hovering"> tooltipsspan>. p>
