Селекторы javascript: Знаете ли вы селекторы?

Уроки по теме «селекторы» для начинающих

В каталоге хекслета найдено 35 уроков по теме «селекторы». Уроки по теме «селекторы» есть в курсах: Основы верстки контента, JS: DOM API.

Урок «BOM-объекты»

В курсе «JS: DOM API»

Знакомимся с объектами, которые позволяют управлять браузером через JavaScript

Урок «Введение»

В курсе «JS: DOM API»

Знакомимся с темой и целями курса

Урок «Консоль разработчика»

В курсе «JS: DOM API»

Учимся пользоваться консолью разработчика в браузере

Урок «Введение в события»

В курсе «JS: DOM API»

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

Урок «Манипулирование DOM-деревом»

В курсе «JS: DOM API»

Учимся менять DOM-дерево, добавлять и удалять элементы

Урок «Управление узлами DOM»

В курсе «JS: DOM API»

Учимся модифицировать элементы, разбираем разницу между атрибутами и свойствами

Урок «События на практике»

В курсе «JS: DOM API»

Учимся создавать интерактивные компоненты

Урок «DOM»

В курсе «JS: DOM API»

Выясняем, чем HTML отличается от DOM

Урок «Полифиллы»

В курсе «JS: DOM API»

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

Урок «Перехват и всплытие»

В курсе «JS: DOM API»

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

Урок «JavaScript в браузере»

В курсе «JS: DOM API»

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

Урок «Формы»

В курсе «JS: DOM API»

Учимся правильно обрабатывать формы

Урок «JQuery»

В курсе «JS: DOM API»

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

Урок «События документа»

В курсе «JS: DOM API»

Знакомимся с событиями, которые возникают при загрузке и выгрузке документа

В курсе «JS: DOM API»

Учимся выполнять AJAX-запросы, используя fetch — современный API браузера

Урок «Декларативный поиск по DOM-дереву»

В курсе «JS: DOM API»

Знакомимся с getElementById, querySelector и другими поисковыми методами

Урок «Глобальный объект Window»

В курсе «JS: DOM API»

Выясняем, зачем и как использовать объект window

Урок «Навигация по DOM-дереву»

В курсе «JS: DOM API»

Знакомимся с структурой DOM-дерева и учимся перемещаться по ней

Урок «Колонки»

В курсе «Основы верстки контента»

Создание журнальной верстки в несколько колонок было проблематичным с использованием CSS. С приходом стандарта CSS3 появился новый модуль — CSS Multi-column Layout, который дал возможность создавать колонки с автоматическим переносом контента. Изучим возможности модуля CSS Columns и ограничения, которые накладываются при таком способе стилизации текста

Урок «Псевдоэлементы»

В курсе «Основы верстки контента»

Не хватило элементов на странице? На помощь приходят псевдоэлементы — элементы, созданные с помощью CSS. В этом уроке разберемся с тем, как создаются псевдоэлементы, зачем они нужны и какие особенности имеют. Увидим, как стилизуют маркеры списка в CSS

Урок «Медиаэлементы»

В курсе «Основы верстки контента»

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

Урок «Переполнение»

В курсе «Основы верстки контента»

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

Урок «Таблицы»

В курсе «Основы верстки контента»

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

Урок «CSS Variables»

В курсе «Основы верстки контента»

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

Урок «Фон»

В курсе «Основы верстки контента»

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

Урок «Псевдоклассы»

В курсе «Основы верстки контента»

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

Нашли 2 курса по тегу «селекторы»

Основы верстки контента

селекторы

Доступность

18 часов

Посмотреть

JS: DOM API

полифиллы

события

селекторы

20 часов

Посмотреть

Вам могут быть интересны темы: AJAX Доступность Верстка window CSS Units HTML5 полифиллы события CSS Columns jQuery CSS3

Селекторы — Справочник CSS — schoolsw3.

❮ Назад Далее ❯

В CSS селекторы — это шаблоны, используемые для выбора элементов, которые вы хотите стилизовать.

Используйте наш CSS Тестер Селектора продемонстрировать различные селекторы.

Селектор	Пример	Описание
.class	.intro	Выделяет все элементы с
#id	#firstname	Выделяет все элементы с
*	*	Выделяет все элементы
элемент	p	Выделить все элементы <p>
элемент,элемент	div, p	Выделить все элементы <div> и <p>
элемент элемент	div p	Выделить все элементы <p> внутри элементов <div>
элемент>элемент	div > p	Выделить все элементы <p> где родителем является элемент <div>
элемент+элемент	div + p	Выделить все элементы <p> которые размещаются сразу после элементов <div>
элемент1~элемент2	p ~ ul	Выделить каждый элемент <ul> которые размещаются сразу перед элементом <p>
[атрибут]	[target]	Выделяет все элементы с атрибутом target
[атрибут=значение]	[target=_blank]	Выделяет все элементы с target=»_blank»
[атрибут~=значение]	[title~=flower]	Выделяет все элементы с атрибутом title, содержащие слово «flower»
[атрибут|=значение]	[lang|=en]	Выделяет все элементы со значением атрибута lang, начиная с «en»
[атрибут^=значение]	a[href^=»https»]	Выбирает каждый элемент <a>, значение атрибута href который начинается с «https»
[attribute$=значение]	a[href$=». pdf»]	Выбирает каждый элемент <a>, значение атрибута href который заканчивается на «.pdf»
[атрибут*=значение]	a[href*=»schoolsw3″]	Выбирает каждый элемент <a>, значение атрибута href которого содержит подстроку «schoolsw3»
:active	a:active	Выбор активной ссылки
::after	p::after	Вставляет что-нибудь после содержимого каждого элемента <p>
::before	p::before	Вставить что-то перед содержимым каждого элемента <р>
:checked	input:checked	Выбирает каждый проверенный элемент <input>
:disabled	input:disabled	Выбрать каждый отключенный элемент lt;input>
:empty	p:empty	Выбирает каждый элемент <p>, у которого нет дочерних элементов (включая текстовые узлы)
:enabled	input:enabled	Выбирает каждый включенный элемент <input>
:first-child	p:first-child	Выбирает каждый элемент <p>, который является первым дочерним элементом родительского элемента
::first-letter	p::first-letter	Выбирает первую букву каждого элемента <p>
::first-line	p::first-line	Выбирает первую строку каждого элемента <p>
:first-of-type	p:first-of-type	Выбирает каждый элемент <p>, который является первым элементом <p> своего родителя
:focus	input:focus	Выбирает элемент ввода, имеющего фокус
:hover	a:hover	Выделяет ссылки при наведении курсора мыши
:in-range	input:in-range	Выделяет входные элементы со значением в заданном диапазоне
:invalid	input:invalid	Выбирает все входные элементы с недопустимым значением
:lang(language)	p:lang(it)	Выбирает каждый элемент <p> с атрибутом lang, равным «it» (итальянский)
:last-child	p:last-child	Выбирает каждый элемент <p>, который является последним дочерним элементом родительского элемента
:last-of-type	p:last-of-type	Выбирает каждый элемент <p>, который является последним элементом <p> своего родителя
:link	a:link	Выделяет все непосещенные ссылки
:not(selector)	:not(p)	Выбирает каждый элемент, который не является элементом <p>
:nth-child(n)	p:nth-child(2)	Выбирает каждый элемент <p>, который является вторым дочерним элементом родительского элемента
:nth-last-child(n)	p:nth-last-child(2)	Выбирает каждый элемент <p>, который является вторым дочерним элементом родительского элемента, считая от последнего дочернего элемента
:nth-last-of-type(n)	p:nth-last-of-type(2)	Выбирает каждый элемент <p>, который является вторым элементом <p> своего родителя, считая от последнего потомка
:nth-of-type(n)	p:nth-of-type(2)	Выбирает каждый элемент <p>, который является вторым элементом <p> своего родителя
:only-of-type	p:only-of-type	Выбирает каждый элемент <p>, который является единственным элементом <p> родительского элемента
:only-child	p:only-child	Выбирает каждый элемент <p>, который является единственным дочерним элементом родительского элемента
:optional	input:optional	Выбирает элементы ввода без атрибута «required»
:out-of-range	input:out-of-range	Выбирает входные элементы со значением вне указанного диапазона
:read-only	input:read-only	Выбирает входные элементы с указанным атрибутом «readonly»
:read-write	input:read-write	Выбирает входные элементы с не указанным атрибутом «readonly»
:required	input:required	Выбирает входные элементы с указанным атрибутом «required»
:root	:root	Выбирает корневой элемент документа
::selection	::selection	Выделяет часть элемента, выбранную пользователем
:target	#news:target	Выбирает текущий активный элемент #news (при щелчке по URL, содержащему имя привязки)
:valid	input:valid	Выбирает все входные элементы с допустимым значением
:visited	a:visited	Выбирает все посещенные ссылки

❮ Назад Далее ❯

Использование селекторов CSS в Javascript

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

Основы

Использование селектора в javascript

• Использовать метод .querySelector

 const div = document.querySelector("div") // => Первое появление элемента div в документе
const p = div.querySelector("p") // => Первое вхождение элемента p в div
 

• Чтобы получить все совпадающие элементы, используйте метод document.querySelectorAll

 document.querySelectorAll("div") // Список узлов всех элементов div
 

По идентификаторам

Чтобы получить элемент по его идентификатору, используйте # перед идентификатором элемента

 document.querySelector("#id") // => document.getElementById('id')
 

По классам

Чтобы получить элементы по классам, используйте . перед именем класса

 document.querySelectorAll(".myElementClass")
 

По имени тега

Чтобы получить элементы по имени тега, просто введите имя тега

 document.querySelectorAll("body") // => document.getElementsByTagName('body')
 

Репликация

• Репликация .getElementById

 document.querySelector("#myDivId") // => document.getElementById('myDivId')
 

• Репликация .getElementsByTagName

 document.querySelectorAll("a") // => document.getElementsByTagName('a')
 

Все элементы

Чтобы получить все элементы, используйте *

 document. querySelectorAll("*") // => NodeList[...]
 

Использование нескольких селекторов

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

 
    <тело>
        
Привет, я абзац
         Привет, я ссылка
        Я еще одна ссылка
    

 

 document.querySelectorAll("p, a") // => NodeList[p,a,a]
 

Еще с элементами

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

Получение дочерних элементов

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

 
    <тело>
        
Привет, я абзац
        <дел>
            Привет, я ссылка
            

                Привет, я абзац, и вот
                
 ссылка