Расширенные селекторы CSS на примере

Недавно на работе мы боролись с некоторым эффектом зависания в приложении React. Сначала мы сосредоточились на решении этой проблемы с помощью JS, и в конечном итоге это стало естественнее и быстрее сделать в CSS.

Я пишу эту статью, потому что чувствую, что мы все больше и больше сосредотачиваемся на JS в мире интерфейсов. Забыть о возможностях CSS и HTML.

В этой статье я расскажу о некоторых селекторах CSS, начиная с дочернего селектора, и надеюсь закончить еще одним удивительным. Наслаждаться

Дочерний селектор

Прямой дочерний селектор идентифицирует только p элементы, которые попадают непосредственно в article элемент.

article > p {…}

<p>...</p>
<article>
  <p>This paragraph will be selected</p>
  <div>
    <p>...</p>
  </div>
</article>

Общий селектор братьев и сестер

Общий родственный селектор выбирает элементы, которые следуют за одним и тем же родителем. H2 элемент должен стоять после p элемента.

p ~ h2 {…}

<h2>...</h2>
<article>
  <h2>...<h2p>
  <p>...</p>
  <h2>This h2 will be selected</h2>
  <div>
    <p>...</p>
  </div>
  <h2>This h2 will be selected</h2>
</article>

Селектор смежных братьев и сестер [+]

Селектор смежных родственников выбирает элемент, который непосредственно следует за одним и тем же родителем.

Будут выбраны только p элементов, следующих непосредственно за img элементом.

img + p {…}

<p>…</p>
<article>
 <p>…</p>
 <img>…</img>
 <p>This paragraph will be selected</p>
 <div>
 <p>…</p>
 </div>
</article>

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

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

div[alt] {...}

Выбирает все элементы с атрибутом alt.

<div alt=”something”>This div will be selected</div>
<div alt=””>This div will be selected</div>

div[alt=”something”] {…}

Выбирает все элементы, у которых есть alt с точным значением.

<div alt=”something”>This div will be selected</div>
<div alt=””>…</div>
<div alt=”abc”>…</div>

div[alt*=”something”] {…}

Выбирает элементы, содержащие значение, но в селекторе также точное значение. (просто нужно, чтобы где-нибудь в значении атрибута было что-то)

<div alt=”something”>This div will be selected</div>
<div alt=”something else”>This div will be selected</div>
<div alt=””>…</div>

div[alt^=”something”] {…}

Выбирает элементы, которые начинаются со значения селектора.

<div alt=”something”>This div will be selected</div>
<div alt=”something else”>This div will be selected</div>
<div alt=”else something”>…</div>
<div alt=””>…</div>

div[alt$=”something”] {…}

Выбирает элементы, заканчивающиеся значением селектора.

<div alt=”something”>This div will be selected</div>
<div alt=”something else”>…</div>
<div alt=”else something”>This div will be selected</div>
<div alt=””>…</div>

div: nth-last-child (2) {…}

Выбирает последние два div, они должны быть братьями и сестрами / иметь одного родителя

<span>
 <div>…</div>
 <div>…</div>
 <div>This div will be selected</div>
 <div>This div will be selected</div>
</span>
<div>…</div>
<div>…</div>

: not (: last-child) {…}

Выбирает все элементы, которые являются not последним дочерним элементом. Комбинация :not и :last-child.

<span>
 <div>This div will be selected</div>
 <div>This div will be selected</div>
 <div>This div will be selected</div>
 <div>…</div>
</span>
<div>This div will be selected</div>
<div>This div will be selected</div>

div: first-of-type {…}

Выберите первых братьев и сестер этого типа.

<span>
 <div>This div will be selected</div>
 <div>…</div>
 <div>…</div>
 <div>…</div>
</span>
<div>This div will be selected</div>
<div>…</div>

div: only-of-type {…}

Выбирает элементы, которые являются единственным дочерним элементом, не имеющим братьев и сестер в родительском контейнере.

<span>
 <div>This div will be selected</div>
</span>
<div>…</div>
<div>…</div>
<span>
 <div>…</div>
 <div>…</div>
</span>

Надеюсь, это поможет. Поделитесь своими самыми интересными селекторами в комментариях!