Css selectors and examples

30 CSS селекторов, которые вы должны знать

Приветствую, друзья, сегодня я покажу 30 CSS селекторов, которые должен знать каждый верстальщик и веб-разработчик. Не важно, если вы только ознакомились с основными CSS селекторами в виде классов и id, или вы уже некоторые время работаете, эта статья поможет всем. Новичкам она поможет разобраться в вопросе лучше. Опытным же разработчикам поможет оптимизировать код, и ускорить процесс верстки в будущем.

Как всегда, я уже подготовил видео к этой статье, советую посмотреть его. В видео я подробнее рассказываю о 30 CSS селекторах. Так же в видео я покажу на примерах как работает тот или иной селектор. Эту же статью я рекомендую использовать больше как шпаргалку к видео и последующей работы. Давайте начинать!

Видео о 30 CSS селекторах, которые вы должны знать

CSS селектор *

Данный селектор выбирает все элементы на странице. Часто его используют в самом начале документа для указания свойства box-sizing: border box для всех элементов. Но вы можете указывать любые свойства. Я в примере ниже указал цвет текста. Он применится для всех элементов на странице.

Так же данный селектор можно применят для стилизации всех дочерних элементов конкретного элемента. В примере ниже я задаю зеленый цвет для всех элементов внутри .block.

CSS селектор # / #element

Скорее всего вы уже знакомы с селектором id. Это один из самых базовых селекторов. Однако, я советую избегать использования данного селектора для стилизации. ID селектор более функционален для использования из JavaScript. В CSS же он только вносит дополнительную сложность, если вы все элементы стилизуете через классы, а некоторые через id. Так же особенность id это то, что id должен быть уникален, и с помощью него можно выбрать только 1 элемент на странице.

CSS селектор . / .element

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

CSS селектор element element (контекстный)

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

// Тут мы зададим цвет элементу с классом title, который находится внутри элемента с классом container .container .title < color: red; >// Тут мы зададим цвет все ссылкам, которые находится внутри элемента в id wrapper #wrapper a < color: red; >// Тут мы зададим цвет всем параграфам, которые находятся в div div p

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

// Если div имеет класс active, меняем ему цвет div.active < color: red; >// Если элемент с классом menu, имеет класс active, меняем для него margin .menu.active

CSS селектор element (селектор по типу)

Данный селектор помогает выбрать все элементы с указанным типом на странице. Например, мы можем выбрать все ссылки или списки.

// Выберем все ссылки и уберем для них подчеркивание a < text-decoration: none; >// Выберем все несортированные списки и зададим им margin ul

CSS селектор a:visited и a:link

С помощью css селектора a:link мы можем выбрать все ссылки, на которые пользователь еще не нажал. С помощью же селектора a:visited мы сможем выбрать те ссылки, по которым пользователь уже переходил. Так же вы можете комбинировать селекторы между собой. Например, стилизовать ссылки с заданным классом, по которых пользователь уже переходил.

// Красим ссылки, по которым пользователь уже переходил a:visited < color: grey; >// Красим ссылки, по которым пользователь пока не переходил a:link < color: red; >// Красим ссылки, которые имеют класс active, и по которым пользователь уже переходил a.active:visited

CSS селектор + / element + element

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

CSS селектор > / element > element

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

// Сработает для этого элемента
• List item
• List item
• List item
• List item
  // Не сработает для этого элемента, так как он не прямой потомок
  • List item

  CSS селектор ~ / element~ element

  Данный селектор похож на селектор +. Только в отличие от него, он выберет не первый элемент после указанного, а все указанны элементы, расположенные на том же уровне вложенности.

  CSS селектор [attribute] / element[attribute]

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

  CSS селектор [attribule=»value»] / element[attribule=»value»]

  Данный селектор выбирает те элементы, у которых указан заданный атрибут с заданным значением. Особенностью данного селектора является его строгость. Если ссылка будет хоть немного отличатся, например будет указанно http://google.com или google.com, то селектор не сработает.

  a[href="https://google.com"] < color: red; // Красит те ссылки, которые ссылаются на https://google.com >a[title="house"] < color: green; // Красит те ссылки, у которых атрибут title равен house >img[src="https://webdevtips.pro/css/30-must-know-css-selectors/house.jpg"] < width: 200px; // Делаем для картинки, которая показывает house.jpg, ширину в 200 пикселей >

  CSS селектор [attribute*=»value»] / element[attribute*=»value»]

  Данный селектор очень похож на предыдущий, однако он является более гибким. Здесь мы указываем то значение, которое должно быть хотя бы частью искомого атрибута. Однако важно помнить, что он слишком обширен. Например, код ниже так же выберет домен, например, ex-google.com, так как в нем есть наша искомая часть.

  CSS селектор [attribute^=»value»] / element[attribute^=»value»]

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

  CSS селектор [attribute$=»value»] / element[attribute$=»value»]

  Данный атрибут очень сильно похож на предыдущий, однако он ищет не по началу строки, а по концу.

  CSS селектор [data-*=»value»] / element[data-*=»value»]

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

  CSS селектор [data-~=»value»] / element[data-~=»value»]

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

  Теперь мы можем выбрать данную ссылку двумя способами.

  a[data-origin="external"] < color: red; >a[data-origin="image"]

  CSS селектор :checked / element:checked

  Как видно из названия, данный селектор выбирает только отмеченные/выбранные чекбоксы и радио кнопки. В примере ниже мы объединим несколько уже пройденных селекторов. Мы будем красить label, в зависимости от состояния чекбокса.

  CSS селекторы ::before и ::after

  Тут мы получаем псевдоклассы определенного элемента. Они позволяют нам добавить контент вокруг данного элемента. В примере ниже мы добавим красную точку после элемента с классом block.

  CSS селектор :hover / element:hover

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

  CSS селектор :not(selector) / element:not(selector)

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

  CSS селектор ::pseudoElement / element::pseudoElement

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

  Как выбирать первую строчку параграфа

  Как выбрать первую букву параграфа

  CSS селектор :nth-child(n) / element:nth-child(n)

  Помогает выбрать элемент в зависимости от его позиции на данном уровне вложенности.

  .block a:nth-child(2) < color: red; // Красим вторую ссылку внутри блока >.block a:nth-child(6) < color: red; // Красим шестую ссылку внутри блока >

  CSS селектор :nth-last-child(n) / element:nth-last-child(n)

  Позволяет выбрать определенный элемент с конца.

  .block a:nth-last-child(1) < color: red; // Красим последнюю ссылку внутри блока >.block a:nth-last-child(3) < color: red; // Красим третью ссылку с конца внутри блока >

  CSS селектор :nth-of-type(n) / element:nth-of-type(n )

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

  CSS селектор :nth-last-of-type(n) / element:nth-last-of-type(n)

  Работает как селектор выше, но начинает считать с конца.

  CSS селектор :first-child / element:first-child

  Этот псевдокласс выбирает первый дочерний элемент.

  CSS селектор :last-child / element:last-child

  Этот псевдокласс выбирает последний дочерний элемент.

  CSS селектор :only-child / element:only-child

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

  CSS селектор :only-of-type / element:only-of-type

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

  CSS селектор :first-of-type / element:first-of-type

  Выбирает первый элемент указанного типа. Нумерация начинается только с нужного типа элемента.

  Спасибо, что прочитали! Если у вас остались вопросы, задавайте их в комментариях на YouTube или в нашем Telegram чате.

  Так же советую ознакомиться с другими моими статьями:

  Full Stack разработчик, Frontend: Vue.js (2,3) + VueX + Vue Router, Backend: Node.js + Express.js. Раньше работал с РНР, WordPress, написал несколько проектов на Laravel. Люблю помогать людям изучать что-то новое)

  Источник

  CSS Selectors

  A CSS selector selects the HTML element(s) you want to style.

  CSS Selectors

  CSS selectors are used to «find» (or select) the HTML elements you want to style.

  We can divide CSS selectors into five categories:

  • Simple selectors (select elements based on name, id, class)
  • Combinator selectors (select elements based on a specific relationship between them)
  • Pseudo-class selectors (select elements based on a certain state)
  • Pseudo-elements selectors (select and style a part of an element)
  • Attribute selectors (select elements based on an attribute or attribute value)

  This page will explain the most basic CSS selectors.

  The CSS element Selector

  The element selector selects HTML elements based on the element name.

  Example

  Here, all

  elements on the page will be center-aligned, with a red text color:

  The CSS id Selector

  The id selector uses the id attribute of an HTML element to select a specific element.

  The id of an element is unique within a page, so the id selector is used to select one unique element!

  To select an element with a specific id, write a hash (#) character, followed by the id of the element.

  Example

  The CSS rule below will be applied to the HTML element with

  Note: An id name cannot start with a number!

  The CSS class Selector

  The class selector selects HTML elements with a specific class attribute.

  To select elements with a specific class, write a period (.) character, followed by the class name.

  Example

  In this example all HTML elements with will be red and center-aligned:

  You can also specify that only specific HTML elements should be affected by a class.

  Example

  In this example only

  elements with will be red and center-aligned:

  HTML elements can also refer to more than one class.

  Example

  In this example the

  element will be styled according to and to

  This paragraph refers to two classes.

  Note: A class name cannot start with a number!

  The CSS Universal Selector

  The universal selector (*) selects all HTML elements on the page.

  Example

  The CSS rule below will affect every HTML element on the page:

  The CSS Grouping Selector

  The grouping selector selects all the HTML elements with the same style definitions.

  Look at the following CSS code (the h1, h2, and p elements have the same style definitions):

  h2 text-align: center;
  color: red;
  >

  p text-align: center;
  color: red;
  >

  It will be better to group the selectors, to minimize the code.

  To group selectors, separate each selector with a comma.

  Example

  In this example we have grouped the selectors from the code above:

  All CSS Simple Selectors

  Selector	Example	Example description
  #id	#firstname	Selects the element with >
  .class	.intro	Selects all elements with >
  element.class	p.intro	Selects only elements with >
  *	*	Selects all elements
  element	p	Selects all elements
  element,element.	div, p	Selects all elements and all elements

  Источник