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

  • 30 января, 16:11
  • 2790
  • 0

Часто программисты используют JavaScript, когда им не хватает знаний о селекторах CSS, чтобы стилизовать динамически создаваемый контент на веб-странице. Рассмотрим несколько CSS-селекторов, которые могут вам с этим помочь.

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

Селекторы

  1. nth-child(odd|even|n)

Этот селектор может помочь найти элемент в определенной группе.  Давайте посмотрим на это в действии.

<ul class="list">
  <li class="list-item">List item 1</li>
  <li class="list-item">List item 2</li>
  <li class="list-item">List item 3</li>
  <li class="list-item">List item 4</li>
  <li class="list-item">List item 5</li>
  <li class="list-item">List item 6</li>
  <li class="list-item">List item 7</li>
  <li class="list-item">List item 8</li>
  <li class="list-item">List item 9</li>
  <li class="list-item">List item 10</li>
  <li class="list-item">List item 11</li>
  <li class="list-item">List item 12</li>
  <li class="list-item">List item 13</li>
  <li class="list-item">List item 14</li>
</ul>

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

ul.list > li:nth-child(even) {
  color: orange;
}

/* or */

ul.list > li:nth-child(2n) {
  color: orange;
}

С другой стороны, что если мы хотим выбрать каждый второй элемент, но начиная с первого (нечетные элементы) у нас также есть два способа сделать это:

ul.list > li:nth-child(odd) {
  color: orange;
}

/* or */

ul.list > li:nth-child(2n+1) {
  color: orange;
}

2n+1 селектор дает команду брать каждый второй элемент, начиная с первого. Но, это можно изменить, чтобы охватить больше сценариев, например, выбрать каждый третий элемент, начиная с пятого. Селектор для этого примера выглядит следующим образом:

ul.list > li:nth-child(3n+5) {
  color: orange;
}

  1. article + p

Этот селектор дает нам возможность выбрать каждый абзац, размещенный сразу после элемента article. Конечно, его можно изменить, чтобы выбрать любой элемент после любого элемента (элемент + элемент).  Используем article и р для примера.

Html

<section>
  <article>Article 1</article>
  <p>Paragraph 1</p> <!-- this will be selected -->
  <article>Article 2</article>
  <article>Article 3</article>
  <div>Div 1</div>
  <p>Paragraph 2</p>
  <article>Article 4</article>
  <p>Paragraph 3</p> <!-- this will be selected -->
</section>

Css

article + p {
  color: orange;
}

  1. article ~ p

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

Html

<section>
  <p>Paragraph 1</p>
  <article>Article 1</article>
  <article>Article 2</article>
  <article>Article 3</article>
  <div>Div 1</div>
  <p>Paragraph 2</p> <!-- this will be selected -->
  <article>Article 4</article>
  <article>Article 5</article>
  <div>Div 2</div>
  <p>Paragraph 3</p> <!-- this will be selected -->
</section>

Css

article ~ p {
  color: orange;
}

  1. [attribute^=value]

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

Html

<ul class="list">
  <li class="list-item">List item 1</li>
  <li class="list-item">List item 2</li>
  <li class="disabled-list-item">List item 3</li> <!-- this will be selected -->
  <li class="list-item">List item 4</li>
  <li class="list-item">List item 5</li>
  <li class="disabled-list-item">List item 6</li> <!-- this will be selected -->
  <li class="list-item">List item 7</li>
  <li class="disabled-list-item">List item 8</li> <!-- this will be selected -->
</ul>

Css

ul.list > li[class^="disabled"] {
  color:orange
}

  1. [attribute$=value]

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

Html

<ul class="list">
  <li class="list-item">List item 1</li>
  <li class="list-item-disabled">List item 2</li> <!-- this will be selected -->
  <li class="list-item">List item 3</li>
  <li class="list-item">List item 4</li>
  <li class="list-item-disabled">List item 5</li> <!-- this will be selected -->
  <li class="list-item">List item 6</li>
  <li class="list-item">List item 7</li>
  <li class="list-item">List item 8</li>
</ul>

Css

ul.list > li[class$="disabled"] {
  color:orange
}

  1. [attribute*=value]

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

Html

<ul class="list">
  <li class="list-item">List item 1</li>
  <li class="list-item">List item 2</li>
  <li class="list-item-disabled">List item 3</li> <!-- this will be selected -->
  <li class="list-item-disabled">List item 4</li> <!-- this will be selected -->
  <li class="list-item">List item 5</li>
  <li class="list-item-bold">List item 6</li>
</ul>
Css

ul.list > li[class*="item-disabled"] {
  color: orange
}

  1. p::first-line

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

Html

<section>
  <p>
    Paragraph 1 First Line <!-- this line will be highlighted -->
    <br>
    Paragraph 1 Second Line
  </p>
  <article>Article 1</article>
  <article>Article 2</article>
  <article>Article 3</article>
  <div>Div 1</div>
  <p>Paragraph 2</p> <!-- this line will be highlighted -->
  <article>Article 4</article>
  <article>Article 5</article>
  <div>Div 2</div>
  <p>
    Paragraph 3 First Line <!-- this line will be highlighted -->
    <br>
    Paragraph 3 Second Line
  </p>
</section>

Css

section > p::first-line {
  color: orange
}

  1. input:in-range

Этот селектор может быть применен только к входам. Он выбирает входы со значением в заданном диапазоне. 

Html

<input type="number" min="7" max="12" value="8" />

Css

input:in-range {
  border: 2px solid green
}

  1. input:out-of-range

Псевдокласс, который позволяет нам выбрать все входные элементы со значением вне заданного диапазона. Каждый number вход может иметь свои минимальные и максимальные свойства, таким образом определяя числовой диапазон. Полезно для страниц с расчетами или финансовыми операциями.

Html

<input type="number" min="7" max="12" value="8" />

Css

input:out-of-range {
  border: 2px solid red
}

  1. :target

И последний, но не менее важный селектор, который позволяет выбрать активный в данный момент элемент после нажатия на тег привязки, где URL указывает на элемент страницы. Вкратце, когда href атрибут содержит идентификатор целевого элемента, этот элемент будет выбран этим селектором после нажатия на соответствующий тег привязки.

Html

<a href="#home">Home</a>
<a href="#about">About</a>

<section id="home">Home</section>
<section id="about">About</section>

Css

:target {
  color: #fff;
  font-weight: bold;
  background-color: orange
}

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

Источник перевода


0 комментариев
Сортировка:
Добавить комментарий