Часто программисты используют JavaScript, когда им не хватает знаний о селекторах CSS, чтобы стилизовать динамически создаваемый контент на веб-странице. Рассмотрим несколько CSS-селекторов, которые могут вам с этим помочь.
Селекторы
- 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;
}
- 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;
}
- 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;
}
- [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
}
- [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
}
- [attribute*=value]
Этот селектор атрибута дает возможность выбрать каждый элемент с данным атрибутом, значение которого содержит данную строку в селекторе. Позиция строки в значении атрибута не важна, поскольку она содержит элемент владельца.
Html
<ul class="list">Css
<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>
ul.list > li[class*="item-disabled"] {
color: orange
}
- 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
}
- input:in-range
Этот селектор может быть применен только к входам. Он выбирает входы со значением в заданном диапазоне.
Html
<input type="number" min="7" max="12" value="8" />
Css
input:in-range {
border: 2px solid green
}
- input:out-of-range
Псевдокласс, который позволяет нам выбрать все входные элементы со значением вне заданного диапазона. Каждый number вход может иметь свои минимальные и максимальные свойства, таким образом определяя числовой диапазон. Полезно для страниц с расчетами или финансовыми операциями.
Html
<input type="number" min="7" max="12" value="8" />
Css
input:out-of-range {
border: 2px solid red
}
- :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 комментариев
Добавить комментарий