Сложные селекторы css: Комплексные селекторы | WebReference

::first-letter и ::first-line позволяют вам (как вы уже догадались!) придать особый стиль первой букве или строке некоторого текста.

::selection позволяет изменить подсветку, когда пользователь выбирает текст на странице.

::before и ::after позволяют нам добавлять дополнительные элементы на страницу с помощью CSS вместо HTML. Использование его для украшения текста различными способами является одним из распространенных вариантов использования.

 <стиль>
  .emojify:: перед {
    содержание: '😎 🥸 🤓';
}
  .emojify :: после {
    содержание: '🤓 🥸 😎';
}

<тело>
  
 Давайте эмоджиифицируемэтот промежуток!

 

Использование этих псевдоэлементов таким образом даст нам следующий результат:

Давайте 😎 🥸 🤓 emojify 🤓 🥸 😎 этот промежуток времени!

Есть намного больше! Быстро просмотрите документацию по псевдоэлементам, чтобы увидеть полный список того, что возможно.

Селекторы атрибутов

Последний инструмент, который мы собираемся добавить, — это селекторы атрибутов. Напомним, что атрибут — это любой элемент в открывающем теге HTML-элемента, например src='picture.jpg' или href="www.theodinproject.com" .

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

Селекторы атрибутов имеют ту же специфичность, что и классы и псевдоклассы (0, 0, 1, 0).

Давайте рассмотрим несколько примеров основного использования.

• [атрибут] — Этот общий селектор выберет все, где существует данный атрибут. Его значение не имеет значения.
• selector[attribute] — При желании мы можем комбинировать наши селекторы атрибутов с другими типами селекторов, такими как селекторы классов или элементов.
• [attribute="value"] — Чтобы получить действительно конкретную информацию, мы можем использовать = для сопоставления определенного атрибута с определенным значением.

 [источник] {
    /* Это будет нацелено на любой элемент, имеющий атрибут src. */
  }
  изображение [источник] {
    /* Это будет нацелено только на элементы img, у которых есть атрибут src. */
  }
  img[src="puppy.jpg"] {
    /* Это будет нацелено на элементы img с атрибутом src, который точно равен «puppy.jpg» */
  }
 

Иногда нам требуется более общий подход к доступу к этим атрибутам. Например, возможно, нас интересуют только элементы img , где значение атрибута src заканчивается на 9.=’аус’] { /* Классы тоже являются атрибутами! Это будет нацелено на любой класс, который начинается с «aus»: */ } [источник$=’.jpg’] { /* Это будет нацелено на любой атрибут src, оканчивающийся на ‘.jpg’: src=’щенок.jpg’ src=’котенок.jpg’ */ } [для*=’больной’] { /* Это будет нацелено на любой атрибут for, внутри которого есть ‘ill’: для = «счет» для = «Джилл» для = «глупо» для = «больной» */ }

Чтобы узнать, чего еще можно добиться с помощью селекторов атрибутов, таких как поиск без учета регистра или подстроки, разделенные дефисами, просмотрите документацию MDN.

Назначение

1. Полная закусочная CSS. Вы должны быть знакомы с большей частью содержания первых двух упражнений, но практика и повторение никогда не помешают! Не забудьте прочитать примеры и пояснения справа.
2. Прочтите статью Шэя Хоу о сложных селекторах. Это охватывает большую часть содержания этого урока немного более подробно.

Дополнительные ресурсы

Этот раздел содержит полезные ссылки на другой контент. Это не обязательно, поэтому считайте его дополнительным, если вам нужно погрузиться во что-то глубже.

• У Кевина Пауэлла есть множество видеороликов по некоторым из этих тем, если вы хотите глубже погрузиться в них.
• Альманах CSS Tricks содержит отличный справочник по всем псевдоэлементам и селекторам. Он включает примеры, дополнительные ресурсы и таблицы поддержки браузеров.
• W3 Schools также имеет солидный и более краткий справочный список. Включает интерактивный инструмент выбора, если вы хотите поиграть с примерами.
• Шпаргалка по селектору Free Code Camp содержит подробный обзор некоторых из наиболее распространенных селекторов.
• Хорошая краткая статья о различиях между псевдоклассами и псевдоэлементами. Также предоставляет исчерпывающую информацию о различных типах селекторов.
• Smashing Magazine об укрощении расширенных селекторов CSS
• Уловки CSS для селекторов атрибутов помогут, если вам нужно глубже изучить атрибуты.

Проверка знаний

Этот раздел содержит вопросы для проверки вашего понимания этого урока. Если у вас возникли проблемы с ответом на приведенные ниже вопросы самостоятельно, просмотрите материал выше, чтобы найти ответ.

• В чем разница между комбинатором-потомком и комбинатором-потомком?
• Чем отличается синтаксис псевдоклассов и псевдоэлементов?
• Существуют ли где-нибудь в HTML псевдоклассы? Есть ли псевдоэлементы?
• Назовите два способа выбора каждого второго дочернего элемента элемента, начиная с первого.
• В чем разница между div:first-child и div:last-child ? Что выберет каждый?
• Какой селектор вы бы использовали для стилизации кнопки, над которой в данный момент находится курсор? Как насчет того, на который в данный момент нажимают?
• Как можно выбрать все элементы ввода с типом текста?
• Как вы могли выбрать все классы, которые начинаются с гром ?

Расширенные селекторы CSS для распространенных сценариев

Странный CSS. Он не похож ни на один другой язык, который используют веб-разработчики, но он имеет решающее значение для визуального представления веб-сайта — той части, с которой взаимодействуют пользователи. В своей самой базовой форме CSS прост. Например, background-color: red означает, что фон будет красного цвета. Тем не менее, как скажет вам любой, кто работал над большой базой кода CSS, она может быстро стать очень сложной и запутанной.

CSS Grid, BEM, Dart Sass, всегда есть что-то новое, что можно узнать о CSS. Это потрясающе! Вместо того, чтобы смотреть на то, что нового, давайте сосредоточимся на фундаментальном строительном блоке CSS — селекторе. Благодаря лучшему пониманию селектора и тому, как использовать его более продвинутыми способами, вы сможете решать распространенные сценарии с меньшим количеством кода и более чистым CSS.

Что такое селектор?

Давайте удостоверимся, что мы на одной волне. Селектор CSS — это то, как вы можете указать браузеру, к какому элементу применить свойства. Они могут быть общими и применяться к большой группе элементов или быть более конкретными и применяться только к одному элементу HTML. Существует пять типов селекторов:

• Простые селекторы для выбора элементов HTML, таких как div , #id или .class
• Селекторы комбинатора, основанные на кодовых связях, таких как «дочерние» p > div или «соседний брат» div + div
• Селекторы псевдокласса для выбора определенного состояния элемента, такого как :hover , :first-child или :nth-of-type
• Селекторы псевдоэлементов для выбора конкретных частей элемента, например ::after , ::selection или ::first-letter . Обратите внимание, что они всегда используют нотацию с двойным двоеточием :: по сравнению с селекторами псевдоклассов, которые используют одно двоеточие
• Селекторы атрибутов для выбора элементов с определенными атрибутами, такими как ( [class|="class-name"] , [type="text"] или [target]

Если для объявления стиля одного и того же элемента используются два отдельных селектора, победит более конкретный селектор — независимо от их порядка в вашем файле CSS. Например, селектор класса, такой как .class-name , является более конкретным, чем обычный селектор элемента HTML, такой как span . Если вам нужно освежить в памяти то, как браузеры решают, какие стили CSS применять, также известный как каскад CSS, попробуйте этот тест.

Теперь, когда мы поняли, что такое селекторы, давайте углубимся в то, как их эффективно использовать. Вы можете воспользоваться менее известными селекторами и даже комбинировать их, чтобы уменьшить объем кода, который вам нужен! Вот еще несколько продвинутых селекторов, которые я использую в своем CSS.

:n-последний-потомок(-n + 2)

Существует множество селекторов псевдоклассов CSS, которые можно использовать для выбора элемента из группы связанных элементов или дочерних элементов родительского элемента.

 <родительский>
    <ребенок>
    <ребенок>
 

Есть :first-child , :nth-child , :nth-of-type , и этот список можно продолжить. Эти селекторы становятся еще более мощными, когда они превращаются в выражения с использованием чисел, счетчика n , нечетного или четного . Вы можете выполнить математику, чтобы выбрать практически любое количество элементов в группе. Например, n — это способ создания алгебраических выражений. Итак, (2n+4) приравнивается к (2*n)+4 , что выберет все остальные элементы, начиная с четвертого:

 (2*0)+4 = 4
(2*1)+4 = 6
(2*2)+4 = 8
(2*4)+4 = 10 

Это полезно во многих сценариях. Например, вам когда-нибудь приходилось стилизовать только два последних элемента в списке? Вы можете добавить класс к этим двум элементам, что приведет к большему количеству HTML и CSS, или вы можете использовать один селектор CSS, например:

 .item:nth-last-child(-n+2) 

Этот селектор можно прочитать как «выбрать двух последних дочерних элементов .item ». Глядя на то, как это работает, -n+2 соответствует (-0+2)=2 или предпоследний элемент, затем (-1+2)=1 или последний элемент, затем (-2+2)=0 , который ничего не выбирает , затем (-3+2=-1) , что снова ничего не выбирает, и так далее для общего количества дочерних элементов. Выбраны только два элемента из-за отрицательного знака перед n , что приводит к обратному отсчету. Если вы хотите выбрать последние три элемента, -n+3 сделает именно это. Это позволяет нам выбирать эти элементы, ничего не добавляя в HTML!

См. демонстрацию селектора Pen
— :nth-last-child(-n+2) Эндрю Спенсера (@iam_aspencer)
на CodePen.

:не(:последний ребенок)

Чтобы еще больше развить последний пример, вы можете комбинировать :last-child с селектором :not . Это может помочь в случаях, когда последний элемент в группе имеет другой стиль. Веб-сайты часто запрашивают список элементов с некоторым интервалом между ними. Распространенной проблемой в этих сценариях является необходимость удаления пробела под последним элементом в группе.

 .изображение {
  поле внизу: 2re;
  &:последний ребенок {
    нижняя граница: 0;
  }
} 

Или вы могли добавить в HTML совершенно новый класс, используя структуру CSS БЭМ. Что даст вам это:

 .изображение {
  поле внизу: 2re;
}
.изображение -- последний {
  нижняя граница: 0;
} 

Оба пути приводят к семи строкам кода и переопределяющему свойству. Не страшно, но если вы думаете о своем CSS как о языке программирования и «запрограммируете» логику прямо в селектор, вы можете уменьшить CSS до этого:

 .image: не (: последний ребенок) {
  поле внизу: 2re;
} 

Читая селектор выше, он говорит: «выберите изображение, которое не является последним потомком». Три строки кода и никаких переопределяющих стилей — неплохо!

См. демонстрацию селектора Pen
— :nth-last-child(-n + 2) Эндрю Спенсера (@iam_aspencer)
на CodePen.

element:hover + соседний брат

Давайте рассмотрим другой сценарий — состояния наведения. Иногда вам нужно настроить элемент, который отличается от элемента, на который наведен курсор. В JavasScript это довольно просто, поскольку JavaScript упрощает поиск определенного элемента, что также называется обходом DOM. Однако часто с правильной структурой HTML вам нужен только CSS.

С помощью CSS вы можете использовать селекторы-комбинаторы, такие как .parent > .child или .element + .general-sibling , для выбора различных элементов. Единственное, что не может сделать CSS, — это настроить таргетинг на элемент, являющийся родителем элемента, на который наведен курсор. Вот диаграмма того, на что может ориентироваться CSS:

 <дел>
  <а>
    Элемент, на который наведен курсор
    Это дочерний элемент, CSS может стилизовать его
  
  Это родственный элемент, CSS может стилизовать его
  «Родительский» 
 не может быть оформлен с помощью CSS при наведении курсора на 
 

Как можно использовать мощный селектор братьев и сестер? Если у вас есть два родственных элемента и вам нужно стилизовать состояние наведения второго элемента, вы можете сделать это следующим образом:

См. демонстрацию селектора Pen
— :hover + sibling by Andrew Spencer (@iam_aspencer)
на CodePen.

Селектор того же уровня можно также использовать для полей формы. С помощью селектора label:hover + input взаимодействие с элементом можно использовать для выделения , который является родственным после .

См. демонстрацию селектора Pen
— ссылка :hover + sibling by Andrew Spencer (@iam_aspencer)
на CodePen.

Ваша очередь

В следующий раз, когда вы подумаете, что CSS — это второстепенный язык, подумайте еще раз. Это просто… другое. И это может быть разочаровывающим или полезным в зависимости от вашей точки зрения. Прежде чем вы откажетесь от CSS и прибегнете к добавлению большего количества HTML или раздуете все вокруг с помощью JavaScript, взгляните на селекторы и свойства CSS, которые вы можете использовать.