0 комментариев
Нет комментариев
В этом уроке мы рассмотрим некоторые из базисных селекторов, которые вы, вероятно, будете чаще всего использовать в вашей работе.
В этом уроке мы рассмотрим некоторые из базисных селекторов, которые вы, вероятно, будете чаще всего использовать в вашей работе.
Селектор типа иногда называется селектором имени тега или селектором элемента, поскольку он выбирает тег/элемент HTML в вашем документе. В примере ниже мы использовали селекторы span, em и strong.
Попробуйте добавить CSS-правило, чтобы выбрать элемент <h1> и изменить его цвет на синий.
Универсальный селектор обозначается звёздочкой (*). Он выбирает всё в документе (или внутри родительского элемента, если он сцеплен с другим элементом и с комбинатором потомка). В следующем примере мы используем универсальный селектор, чтобы убрать внешние отступы у всех элементов. Несмотря на стилизацию по умолчанию, добавленную браузером, — она раздвигает заголовки и абзацы с помощью отступов, — всё плотно сжато.
Такого рода поведение иногда можно увидеть в «таблицах сброса стилей», которые вычищают всю стилизацию браузера. Так как универсальный селектор вызывает глобальные изменения, мы используем его в очень специфических ситуациях, таких как та, что описана ниже.
Одно из применений универсального селектора состоит в том, чтобы облегчить чтение селекторов и сделать их более удобопонятными с точки зрения того, что они делают. Например, если мы хотим выбрать элементы-потомки элемента <article>, которые являются первыми дочерними элементами своего родителя, включая дочерние элементы самого <article>, и сделать их шрифт жирным, мы могли бы использовать псевдокласс :first-child, который мы будем изучать в уроке о псевдоклассах и псевдо-элементах, как селектор-потомок вместе с селектором элемента <article>:
Однако этот селектор можно спутать с article:first-child, который выберет любой элемент <article>, являющийся первым дочерним элементом другого элемента .
Чтобы избежать этой путаницы, мы можем добавить универсальный селектор в псевдокласс :first-child , чтобы было очевидно, что делает селектор. Он выбирает любой элемент, который является первым дочерним элементом элемента <article> или первым дочерним элементом любого потомка элемента <article>:
Хотя оба делают одно и то же, удобочитаемость значительно улучшилась.
Селектор класса начинается с символа точки (.). Он выберет в документе всё, к чему применён этот класс. В живом примере ниже мы создали класс с именем .highlight, и применили его к нескольким местам в документе. Все элементы, к которым применён класс, подсвечиваются.
Вы можете создать селектор, нацеленный на конкретные элементы, к которым применён класс. В следующем примере мы подсветим <span> с классом highlight иначе, чем заголовок <h1> с классом highlight. Мы сделаем это, используя селектор типа для элемента, на который нацелены, с классом, добавленным с помощью точки, без пробела между ними.
Этот подход сужает границы правила. Правило будет применяться только к этой конкретной комбинации элемента и класса. Вам нужно будет добавить другой селектор, если вы решили, что правило должно применяться и к другим элементам.
Вы можете применить несколько классов к элементу и нацелиться на них по отдельности, или выбрать элемент только если присутствуют все классы селектора. Это может быть полезно при создании компонентов, которые могут сочетаться на вашем сайте разными способами.
В примере ниже у нас есть <div>, содержащий примечание. Серая граница применяется когда блок имеет класс notebox. Если у блока есть также класс warning или danger, мы меняем border-color (en-US).
Мы можем указать браузеру, что мы хотим подобрать только такой элемент, к которому применены два класса, сцепив их вместе без пробелов между ними. Вы увидите, что к последнему <div> не применён ни один стиль, так как он имеет только класс danger; ему нужен ещё и класс notebox, чтобы получить какую-нибудь стилизацию.
Селектор ID начинается с #, а не с точки, но используется так же, как и селектор класса. Однако ID может быть использован единожды на странице, и к элементу может быть применён только один id. Можно выбрать элемент, которому присвоен id, а также вы можете предварить ID селектором типа для нацеливания на элемент, имеющий соответствующее сочетание элемента и ID. Вы можете увидеть оба варианта использования в следующем примере:
**Предупреждение:**Может показаться, что неоднократное использование в документе одного и того же ID выполняет задачи стилизования, но не стоит этого делать. Результатом будет неверный код, который приведёт к многочисленным странностям в поведении.
Примечание: Как мы знаем из урока по специфичности, ID имеет высокую специфичность. Он будет брать верх над большинством других селекторов. В большинстве случаев предпочтительнее добавить элементу класс, чем ID. Однако, если использование ID это единственный способ нацелиться на элемент — возможно, потому вы не имеете доступа к разметке и, следовательно, возможности её редактировать — это будет работать.
Мы продолжим изучение селекторов и рассмотрим селекторы атрибута.