CSS селекторы про которые вы могли не знать

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

Как выбрать все теги при помощи CSS

В отличие от селектора body, * выделит все элементы на странице:

Думаю, вы уже знаете самые простые способы выбора: p — выберет все теги p (тег параграфа), .my-class — выберет все классы .my-class на странице и #my-id — как вы уже догадались, id (вот это поворот 🙂 ). Стоит отметить, что в современной разработке id стоит использовать лишь в 2 случаях: если вам нужно сделать ссылку на какой-то конкретный элемент страницы (анкор) или если вы используете javascript.

Есть совмещенные селекторы p.my-class — выберет все параграфы с классом .my-class, все остальные элементы на странице выбраны не будут. Стили можно применять для нескольких селекторов:

CSS выбор по иерархии

Чтобы проще было ориентироваться в тегах используют такие понятия как родитель и потомок. Посмотрим на практике

Тег p, h2 и .my-parent не являются родителями или потомками по отношению друг к другу — это рядом лежащие теги, на одном уровне так сказать (обычно вложенность выделяется знаком табуляции или двумя пробелами). Но вот .my-child1 и .my-child2 это потомки .my-parent, и для них .my-parent является родителем.

Последняя запись означает что класс .little не будет выбран

Как выбрать первый, последний, следующий элемент.

С первым и последним элементом все понятно.

Есть вариант выбирать номер по порядку:

Еще одна важная вещь — как выбрать отрицание:

такой код выберет все, кроме первого div элемента.

А вот на выборе следующего элемента остановимся более детальней. Данный код будет выбирать только те h2 которые идут после p (не забудьте, элементы должны лежать на одном уровне, они не должны быть вложены и т.д.):

Но что делать если нам нужно выбрать все элементы после конкретного селектора?

Этот код выберет все div которые лежат сразу после h2

Как выбрать тег по его атрибуту

Еще один вариант выбора тега по его атрибуту. Предположим что у нас есть такие вот 2 кнопки в форме:

Как видите, у наших кнопок нету классов. Предположим что вам нужно как-то добраться до них:

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

Напоследок хотелось бы рассказать про, так называемые data- атрибуты. В HTML5 появилась возможность в коде указывать не только стандартные атрибуты, но и произвольные атрибуты, которые могут нам пригодится. Как работают дата атрибуты:

Мы записали текстовую информацию в наш собственный атрибут data-title. Тут может быть любая информация — кстати говоря, отлично подойдет для данных полученных динамическим путем. Наш CSS код:

Мы выводим фразу «Hello, » сразу перед основным содержимым.
Ну вот и все что я хотел рассказать в этом небольшом обзоре. Почитайте в интернете какие еще есть способы выбора и обязательно попробуйте все что вы узнали на практике 🙂

автор: Dmitriy

Занимаюсь веб-разработкой с 2011 года.Предоставляю услуги по созданию проектов на CMS 1С-Битрикс — сайты, шаблоны и компоненты с нуля, а также доработка функционала на уже существующих проектах.


Другие виды работ:

— Вёрстка макетов (HTML, CSS, JavaScript, jQuery, JADE, SASS, Gulp);

— Натяжка вёрстки на 1С-Битрикс;

— Скрипты на PHP и JS (jQuery);

— Парсинг (CSV, XML, XLSX, JSON);

— Интеграции со сторонними сервисами по API;

— Многоязычные версии сайтов;

— и многое другое :)


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

E-mail: dmitriyribka@gmail.com

Skype: cinemacreaterus


Один комментарий

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *