Руководство для начинающих по селекторам CSS

Для моего первого поста на dev.to здесь представлены селекторы CSS, собранные в форме, которую я счел наиболее удобоваримой 🙂

Мои материалы будут посвящены закладке фундамента, на котором будут строиться безграничные знания о программном обеспечении. Мне не терпится разделить это путешествие с вами!

И я посыпал вас вопросами; если у вас есть ответы, я буду рад <3

Часть 1 Селекторы типов

Выбирает — Элемент по типу тега
т.е. div = <div>, p = <p>.

1.1 Псевдоселекторы

Выбирает — 1 конкретную часть элемента
—> Область применения — в основном единственное число, но может быть и множественным

Синтаксис — Ключевое слово, добавленное к селектору
= Все псевдоселекторы имеют точную формулировку

1.1.1 Первый по типу

Выбирает — 1 элемент типа X
Цели — 1 элемент типа X, или 1 элемент типа X, который является прямыми детьми каждого элемента Y

Синтаксис — «:first-of-type»

т.е. span:first-of-type
= 1-й <span> любого элемента
т.е. p span:first-of-type
= 1-й <span> любого <p>s

1.1.2 Nth of Type

Выбирает — Элемент Ат типа X
Цели — 1 элемент типа X, встречающийся Ath раз в документе
—> Область применения — Единственный || Множественный
Evaluates — Type && ((Order || Even/Odd) || Formula)

~ Вопросы
При использовании с Родителем, относится ли это только к прямым детям?
При использовании без родителя, относится ли это только к элементам верхнего уровня?
Можно ли использовать этот псевдоселектор независимо от селектора? ~

Разновидности синтаксиса

т.е. div:nth-of-type(2)
= 2-е вхождение <div>.

":nth-of-type(even)"
ie .example:nth-of-type(odd)
= Все нечетные class="example" вхождения

":nth-of-type(An)"
= Каждое вхождение элемента X с номером Ath
т.е. span.nth-of-type(4n)
= каждое четвертое <span> появление

":nth-of-type(An+B)"
= Считая от B-го (включительно) появления, каждое Ath-ое появление элемента X

т.е. span.nth-of-type(6n+2)
= отсчет от 2-го (включительно) <span> появления, каждое 6-е <span> появление.

1.1.3 Только типа

Выбирает — Элемент X, если он является единственным дочерним элементом X в родительском элементе Y.
Цели — Все родительские элементы Y с единственным дочерним элементом, который является элементом X
—> Область применения: Единичный выбор в каждом родителе

Синтаксис — ":only-of-type"

~ Вопрос
Будет ли использование этого псевдоселектора независимо от селектора выбирать все уникально используемые типы элементов? ~

p span:only-of-type
= 1 <span> дочерний элемент любого <p> родительского элемента без других <span> дочерних элементов.

1.1.4 Последний по типу

Выбирает — конечный элемент типа X в пределах любого элемента Y
Цели — 1 элемент типа X, или 1 элемент типа X, который является прямыми детьми каждого элемента Y
—> Область — Единичный выбор в каждом родительском элементе, но множественный выбор по всему документу.

Синтаксис — ":last-of-type"

~ Вопрос
Будет ли использование этого без селектора выбирать каждый последний элемент любого типа? ~

т.е. div:last-of-type
= конечное <div> вхождение в любой родительский элемент
ie p span:last-of-type
= конечное <span> вхождение в любой <p> элемент

~ Вопрос
Включает ли область оценки все элементы, семантически входящие в элемент Y? Или только прямые дочерние элементы? ~

Часть 2 Идентификационные селекторы

Выбирает — Элемент с определенным ID (Элемент может иметь только 1 ID)

Синтаксис — #id
т.е. #cool = id="cool", ul#long = <ul id="long"> (ID + Потомок)

Часть 3 Селекторы-потомки

Выбирает — Элемент внутри другого элемента

Синтаксис — A B
т.е. p strong = <strong> внутри любого <p>, #fancy span = <span> внутри id="fancy".

Часть 4 Селекторы классов

Выбирает — Элементы по классу (Элемент может иметь несколько классов)

Синтаксис — .classname
т.е. .neato = class="neato"
ie #big.wide = id="big"s w/ class="wide" (ID + Class)
ie ul.important = <ul>s w/ class="important" (Тип + Класс)

Часть 5 Комбинаторы с запятыми

Селекторы — Комбинированные селекторы

Синтаксис — A, B

ie p, .fun = <p> && class="fun"

Часть 6 Универсальные селекторы

Селекторы — Все

Синтаксис — *

ie

* {
box-sizing: border-box
}
Вход в полноэкранный режим Выход из полноэкранного режима

ie p *
= Все элементы внутри тега <p>
—> Исключая сам тег <p>.

Часть 7 Селекторы родства

7.1 Смежный

Выбирает — Элемент непосредственно после другого элемента
Цели — 1 последующий брат или сестра каждого брата или сестры
—> Область применения — Единичный выбор по отношению к каждому брату или сестре, но множественный по всему документу.

Синтаксис — A + B
= Элемент B непосредственно после всех элементов A
= A && B находятся на одном уровне/HTML отступа

т.е. p + .intro
= Все class=»intro» непосредственно после любого <p>
т.е. div + a
= Все <a> непосредственно после любого <div>.

7.2 Общие

Выбирает — Элементы после другого элемента
Цели — Все существующие элементы X, следующие за всеми существующими элементами Y.
—> Область — Множественный выбор по отношению к каждому родственному элементу && & Множественный выбор по всему документу.

Синтаксис — A ~ B
= Все элементы B непосредственно после элемента A
= A && B имеют одинаковый отступ HTML

Общее и смежное
= Общий: Все
= Смежный: 1

Часть 8 Селекторы дочерних элементов

Выбирает — Все элементы X, которые являются прямыми детьми элементов Y
Прямой ребенок = 1 отступ HTML
(Потомственные элементы = > 1 отступ HTML)
—> Область действия — Несколько в каждом родителе.

Синтаксис — A > B
= Все элементы B, вложенные непосредственно в любой элемент As

8.1 Псевдоселекторы

8.1.1 Первый ребенок

Выбирает — 1-го ребенка внутри элемента X
—> Область применения — Единичный выбор внутри каждого родительского элемента, Множественный выбор по всему документу.

Синтаксис — ":first-child" — Точная формулировка

т.е. :first-child = Все элементы, которые являются первыми детьми
ie p:first-child = Все <p>являющиеся первыми детьми
ie div p:first-child = Все <p>, которые являются первыми детьми любого <div>.
т.е. div :first-child = 1-й ребенок (независимо от того, что это) любого <div>s

8.1.2 Только ребенок

Выбирает — Любой элемент, который является единственным ребенком.
Цель — Все родительские элементы, имеющие только 1 дочерний элемент
—> Область применения — Единичный выбор в каждом родительском элементе, Множественный выбор по всему документу.

Синтаксис — ":only-child" — Точная формулировка

т.е. span:only-child = Все <span>, которые являются единственными детьми
т.е. ul li:only-child = Все <li>, которые являются единственными детьми любого <ul> родителя.

8.1.3 Последний ребенок

Выбирает — Последний прямой ребенок родителя
Цели — Родители с любым количеством детей
—> Область применения — Единичный выбор в каждом Родителе, Множественный по всему документу.

Синтаксис — ":last-child" — Точная формулировка
= Все элементы, которые являются последними детьми

т.е. span:only-child = Все <span>, которые являются единственными детьми
ie ul li:only-child = все <li>, которые являются единственными детьми любого <ul> родителя.

8.1.4 Nth Child

Выбирает — Ат Дочерний элемент родительского элемента X
Цели — Родительские X с несколькими дочерними элементами
—> Область применения — Единичный выбор в каждом Родителе, Множественный по всему документу.

Синтаксис — ":nth-child(A)" — Точная формулировка
= Все дети в позиции Ат в родительской группе.

т.е. :nth-child(8)
= Все 9-е дети любого родителя
т.е. div p:nth-child(2)
= 2-е <p>, которые являются прямыми детьми любого <div>.

8.1.5 Nth Last Child

Выбирает — Считая в обратном порядке, N-й ребенок родительского X
Цели — Родительские X с некоторым количеством детей
—> Область применения — Единичный выбор в каждом родительском элементе, Множественный выбор по всему документу.

Синтаксис — ":nth-last-child(A)" — Точная формулировка
= Отсчет в обратном порядке, дети в позиции Ат в родительской группе.
т.е. :nth-last-child(2)
= Все предпоследние дети любого родителя.

Часть 9 Другие псевдоселекторы

Выбирает — Элементы в указанном состоянии
—> Область применения — В основном множественная, может быть единичной

Применение — Как применение класса к части документа
Назначение — Сокращение избыточных классов в HTML && Гибкий, удобный для обслуживания код

Синтаксис — :pseudo-class-name
= Все псевдо-селекторы имеют точную формулировку

9.1 Пустой

Выбирает — Элементы без детей
Цели — Все не-родители
—> Область применения — может быть единственным, может быть множественным

~ Вопрос
Являются ли псевдоклассы синонимами псевдоселекторов?
Включают ли они наиболее глубоко вложенные дочерние элементы? Или только элементы верхнего уровня? ~

Синтаксис — ":empty"
= Все элементы без дочерних элементов
т.е. div:empty
= Все элементы <div> без дочерних тегов

9.2 Отрицание

Выбирает — Все элементы !== X
Цели — Все элементы, возможно, внутри другого элемента, без соответствующей характеристики
—> Область — Может быть единственным, может быть множественным, с/или не с/в родительском элементе.

Синтаксис — ":not(X)"
т.е. :not(#fancy)
= Все элементы без id="fancy"
ie div:not(first-child)
= Все <div>, которые не являются первыми детьми
~ Вопрос
Предполагает ли это предпосылку, что <div> является ребенком? ~
т.е. :not(.big, .medium)
= Все элементы без class="big" && без class="medium!

Часть 10 Селекторы атрибутов

Выбирает — Все элементы с указанным атрибутом
—> Область применения — Зависит

Атрибут: в открывающем теге элемента, после тега Type (не должен содержать значение) Синтаксис — <span attribute="value">
—> Включает классы и идентификаторы (определяют заданные характеристики селекторов)

Синтаксис — [атрибут]
ie a[href] (Тип + Атрибут)
= Все элементы <a> с href="anything"
т.е. [type]
= Все элементы с type="anything"

10.1 Значение

Выбирает — Элементы с указанным атрибутом && Значение атрибута
Цели — Любой тип/класс/идентификатор (если не указано), чей открывающий тег содержит соответствующий атрибут && соответствующее значение
—> Область применения — Зависит

Предупреждение — чувствителен к регистру
= Каждый символ должен точно соответствовать

Синтаксис — [attribute="value"]
т.е. input[type="checkbox"]
= все <input> с [type] атрибутом && "checkbox" в качестве значения.

10.2 Начинается с

Выбирает — Элементы со значением атрибута, начинающимся с указанного символа(ов)
Цели — Любой тип/класс/идентификатор (если не указано), чей открывающий тег содержит соответствующий атрибут && Значение с соответствующим началом
—> Область применения — Зависит

Синтаксис — [attribute^="value"]
т.е. .toy[category^="Swim"]
= Элементы с class="toy" && [category] Attribute && Value leading w/ "Swim"

10.3 Заканчивается

Выбирает — Элементы со значением атрибута, заканчивающиеся на указанные символы
Цели — Любой тип/класс/идентификатор (если не указано), чей открывающий тег содержит соответствующий атрибут && Value с соответствующим окончанием
—> Область применения — Зависит

Синтаксис — [attribute$="value"]
т.е. img[src$=".jpg"]
= все элементы с типом img && [src] атрибут && значение атрибута, заканчивающееся на ".jpg".

10.4 Дикий символ

Выбирает — Элементы с атрибутом с указанными символами в любом месте его значения.
Цели — Любой тип/класс/ID (если не указано), чей открывающий тег содержит соответствующий атрибут && Значение, где есть соответствующие символы.
—> Область применения — Зависит

Случай использования — Существование идентифицируемых общих шаблонов в таких вещах, как class, href, или src атрибуты.

Синтаксис — [атрибут*=»значение»].
ie img[src*="/thumbnails/"] (Тип + подстановочный знак атрибута)
= Элементы типа img с атрибутом [src] && значение атрибута, содержащее "/thumbnails/" в любом месте
т.е. [class*="heading"]
= Элементы с атрибутом [class] && Значение атрибута, содержащее "heading" в любом месте

Спасибо, что присоединились ко мне на одном из самых первых шагов в моем путешествии по разработке программного обеспечения, которое заключается в создании прочного фундамента для этого приключения длиною в жизнь 🙂

До следующего раза,
Ангелина

P.S Я также веду общий блог о своем стартап-путешествии. Не стесняйтесь, загляните сюда: Ссылка

Оцените статью
devanswers.ru
Добавить комментарий