Css как: Как работает CSS — Изучение веб-разработки

Как работает nth-child — Веб-стандарты

Существует такой селектор, точнее псевдокласс, называемый :nth-child. Вот пример его использования:

ul li:nth-child(3n+3) {
    color: #cccccc;
}

Что делает CSS-код, приведенный выше? Он выбирает каждый третий элемент внутри маркированного списка: это 3-й, 6-й, 9-й, 12-й и т.д. Давайте посмотрим, как именно работает это выражение и что еще можно сделать с помощью :nth-child.

Всё зависит от того, что находится между скобками. Селектор :nth-child принимает два ключевых слова: even и odd. Тут всё просто: even выбирает чётные элементы, такие как 2-й, 4-й, 6-й и т.д., а odd выбирает нечётные элементы, такие как 1-й, 3-й, 5-й и т.д.

Как видно из первого примера, :nth-child также принимает в качестве параметра выражения. В том числе и простейшие уравнения, иначе говоря, просто числа. Если поставить их в скобки, будет выбран только один элемент с соответствующим номером.

ul li:nth-child(5) {
    color: #cccccc;
}

Однако давайте вернемся к 3n+3 из первого примера. Как он работает и почему выбирается каждый третий элемент? Весь фокус в понимании переменной n и приведенного алгебраического уравнения. Подумайте об n, как о начинающемся с нуля множестве целых чисел. Потом дополните уравнение. Так 3n это 3×n, а все уравнение вместе это (3×n)+3. Теперь, подставляя вместо n числа больше или равные нулю, мы получим:

• (3 × 0) + 3 = 3 = 3-й элемент
• (3 × 1) + 3 = 6 = 6-й элемент
• (3 × 2) + 3 = 9 = 9-й элемент и т.д.

А как насчёт :nth-child(2n+1)?

• (2 × 0) + 1 = 1 = 1-й элемент
• (2 × 1) + 1 = 3 = 3-й элемент
• (2 × 2) + 1 = 5 = 5-й элемент и т.д.

Так, стоп! Это ведь то же самое, что и 

• (3 × 0) = 0 = ничего нет
• (3 × 1) = 3 = 3-й элемент
• (3 × 2) = 6 = 6-й элемент
• (3 × 3) = 9 = 9-й элемент и т. д.

Итак, как вы можете видеть, результат получится такой же, а значит, нет необходимости в +3. Мы можем использовать и отрицательные значения n, с таким же успехом, как и вычитание в уравнениях. Например, 4n-1:

• (4 × 0) – 1 = –1 = ничего нет
• (4 × 1) – 1 = 3 = 3-й элемент
• (4 × 2) – 1 = 7 = 7-й элемент и т.д.

Использование -n может показаться странным — ведь если конечный результат отрицательный, то никакие элементы в выборку не попадут. Но если дополнить уравнение и снова сделать результат положительным, то выборка окажется довольно интересной: при помощи неё можно будет получить первые

• –0 + 3 = 3 = 3-й элемент
• –1 + 3 = 2 = 2-й элемент
• –2 + 3 = 1 = 1-й элемент
• –3 + 3 = 0 = ничего нет и т.д.

На SitePoint есть хороший справочник с милой табличкой, которую я бесстыдно опубликую здесь:

Поддержка браузерамиСкопировать ссылку

Селектор :nth-child — один из немногих CSS-селекторов, который почти полностью поддерживается в современных браузерах и абсолютно не поддерживается в IE, даже в IE8. Поэтому когда дело доходит до его использования, и конечный результат сделан по технологии прогрессивного улучшения — вы можете смело использовать его для некоторых оформительских элементов, вроде расцветки строк таблицы. Однако не стоит применять его в более серьезных случаях. Например, полагаться на него в раскладке сайта или удалять правое поле из каждого третьего блока в сетке три на три, чтобы они вошли в ряд.

Спасением здесь может послужить библиотека jQuery, которая реализует поддержку всех CSS-селекторов, включая :nth-child, даже в Internet Explorer.

Всё равно неясно?Скопировать ссылку

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

Также загляните на страничку полезных рецептов :nth-child, там вы сможете найти код для наиболее распространенных случаев.

Как изменить элемент с помощью CSS, если у нас нет класса или идентификатора с псевдоклассами

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

Не волнуйтесь, не все потеряно.

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

Оглавление

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

И в частности, конечно, это справедливо для WordPress, ведь в наших примерах мы будем делать это в WordPress.

📺️ Видеоурок:

Suscríbete a mi канал:  

:first-of-type Изменить только первый элемент

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

Теперь мы увидим конкретные примеры, но вот вам помощь очень хорошо об этом псевдоклассе.

Первое, что мы собираемся изменить, это первый элемент меню:

Обычно, когда я хочу что-то изменить, я захожу в инспектор элементов моего браузера (правая кнопка -> Проверить) и проверяю, имеет ли изменяемый элемент класс или идентификатор:

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

Но представьте, что вы его видели и я не знаю, что у него есть идентификатор 🙈

Я собираюсь изменить этот элемент, как если бы этого идентификатора не существовало.

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

#top-menu li:first-of-type {
    margin-right: 140px;
}

И вот результат:

Как мы видим на скриншоте выше, к первому элементу применяется только правое поле.

:last-of-type Изменить только последний элемент

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

На этот раз мы будем использовать :last-of-type следующим образом:

#top-menu li:last-of-type {
    margin-right: 140px;
}

И результатом будет:

:nth-of-type Изменить элемент или элементы, которые мы хотим

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

Давайте представим, что мне нужно изменить второй элемент моего меню, для этого мы будем использовать nth-of-type следующим образом:

#top-menu li:nth-of-type(2) {
    margin-right: 140px;
}

Создание шаблонов с помощью :nth-of-type на четных элементах

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

#top-menu li:nth-of-type(2n) {
    margin-right: 140px;
}

И результатом будет применение поля ко второму и четвертому элементам:

Создание шаблонов с помощью :nth-of-type на нечетных элементах

Точно так же мы можем обращаться к нечетным элементам следующим образом:

#top-menu li:nth-of-type(2n+1) {
    margin-right: 140px;
}

И результатом будет:

Добавить изменения CSS в WordPress

Мы вносили изменения CSS в инспектор элементов. И это здорово, чтобы проверить это, но как только мы обновим страницу, изменения исчезнут, поскольку эти изменения сохраняются не в Интернете, а в нашем собственном браузере.

Чтобы добавить изменения в WordPress, есть много способов, от изменения файла CSS нашего шаблона до использования самого интерфейса WordPress.

Мы собираемся использовать сам интерфейс WordPress, для этого переходим в меню «Настроить» -> «Добавить дополнительный CSS»:

Мы нажимаем и попадаем на экран, где мы должны добавить CSS:

Бонусный трек: добавление псевдокласса к дочернему элементу

Как мы видели, эти псевдоклассы позволяют нам легко модифицировать родственные элементы, то есть элементы, находящиеся на одном уровне.

Но давайте представим, что мы хотим изменить цвет нечетных элементов нашего меню.

Цвет определяется не в элементе списка (li), а в элементе ссылки (a), который находится внутри элемента списка:

Если мы посмотрим на инспектор элементов:

Если мы присмотримся, то увидим, что мы не смогли создать шаблон следующим образом:

#top-menu li a:nth-of-type(2n+1) {
    color: red;
}

Поскольку каждая ссылка находится в другом li, все они будут первым элементом и все они изменят цвет:

Что нам нужно сделать, так это применить шаблон с псевдоклассом к элементу li следующим образом:

#top-menu li:nth-of-type(2n+1) a {
    color: red;
}

В результате получилось то, что мы действительно хотели:

Как мы видели, это не конец света, если у нас нет идентификатора или класса.

Благодаря псевдоклассам мы можем получить доступ практически к любому элементу нашего HTML.

Надеюсь вам понравилось 😉

Что это за селектор CSS? [класс*=»диапазон»]

спросил

Изменено 9 месяцев назад

Просмотрено 290 тысяч раз

Я видел этот селектор в Twitter Bootstrap:

 .show-grid [class*="span"] {
    цвет фона: #eee;
    выравнивание текста: по центру;
    радиус границы: 3px;
    минимальная высота: 30 пикселей;
    высота строки: 30 пикселей;
}
 

Кто-нибудь знает, как называется эта техника и что она делает?

• css
• css-селекторы

Это селектор подстановочных знаков атрибута. В приведенном вами образце он ищет любой дочерний элемент под . show-grid , у которого есть класс, содержащий CONTAINS span .

Таким образом, в этом примере будет выбран элемент

 

    Бла-бла-бла

 9="что-то"] { }
 

 div[class$="something"] { }
 

 .show-grid [класс*="диапазон"]
 

 .
  show-grid [class*="span"] {
 

 <дел>
  
.span
  
span6
  
внимание
  
испанский
  
Мариоспэн
  
испанский
  <дел>
    
.span