СКРИПТЫ
ТЕГИ:
php (284)
js (166)
html (138)
css (116)
html tags (61)
jquery (40)
edit text (37)
php array (30)
form html (29)
fonts (27)
ruweb.net (23)
foto (22)
atom (20)
online (20)
forum (19)
svg (18)
Показать еще :
hosting (17)
board (17)
php file (16)
html book (16)
js method (16)
color (15)
input (15)
php date (15)
link (15)
js events (14)
htaccess (13)
table (13)
osclass (13)
dw block (12)
path (12)
js delete (12)
select (12)
icon (11)
form (11)
notepad (11)
download (11)
img (11)
php time (11)
keyboard (11)
php img (11)
jsphp (11)
mouse (10)
url (10)
js time (9)
info (9)
yandex (9)
php url (7)
comment (7)
cookie (7)
hover (7)
task (7)
dosite (7)
js url (6)
list (6)
iframe (6)
click (6)
year (6)
mysql (6)
search (5)
ftp (5)
chart (5)
browser (5)
js id (5)
mb (5)
php get (5)
heading (5)
adminka (5)
value (5)
symbols (4)
vk (4)
js form (4)
console (4)
mounth (4)
submit (4)
reg.ru (4)
bbcode (4)
day (4)
week (4)
captcha (3)
js img (3)
ucoz (3)
line (3)
ssl (3)
scandir (3)
pages (3)
js post (3)
https (3)
vs code (3)
padding (3)
рся (2)
second (2)
money (2)
youtube (2)
video (2)
typeof (2)
seo (2)
sitemap (2)
title (2)
tag hr (2)
cursor (2)
js vars (2)
counter (2)
arrows (2)
base64 (2)
qr kod (2)
height (2)
details (2)
archive (1)
numbers (1)
domen (1)
books (1)
куб (1)
scroll (1)
smile (1)
header (1)
windows (1)
google (1)
speed (1)

Список всех Селекторов в CSS

"Селектор CSS" - что такое селектор CSS? Примеры селекторов. Список всех селекторов, которые существуют!

Подробно о селекторах в css

  1. Что такое селектор?
  2. Таблица всех селекторов

  1. Что такое селектор?

    Селектор - это часть CSS-правила, которая сообщает браузеру, к какому элементу (или элементам) веб-страницы будет применён стиль.

    Термин селектор может относиться к простому селектору (simple selector), составному селектору (compound selector), сложному селектору (complex selector) или списку селекторов.

    Список всех селекторов

    *

    .class

    #id

    tag

    X, Y

    X Y

    Х > Y

    Х ~ Y

    Х + Y

    a:link, a:visited, a:hover, a:active, a:focus

    [attr]

    [attr = value]

    [attr *= value]

    [attr ^= value]

    [attr $= value]

    [attr ~= value]

    [attr |= value]

    :target

    :checked

    :default

    :disabled

    :enabled

    :empty

    ::before

    ::after

    :focus

    :focus-visible

    :focus-within

    :hover

    :not(selector)

    ::first-line, ::first-letter
    :nth-child(n)

    :nth-last-child(n)

    :nth-of-type(n)

    :nth-last-of-type(n)

    :first-child

    :last-child

    :first-of-type, :last-of-type

    :only-child

    :not(:only-child)

    :only-of-type


  2. Таблица всех селекторов

    В таблице приведены все селекторы с примером и описанием:

    Селектор Пример Описание примера
    * * Все элементы.
    #id #firstname Элемент с id="firstname".
    .class .intro Все элементы с class="intro".
    .class1.class2 .name1.name2 Все элементы с class="name1 name2".
    .class1 .class2 .name1 .name2 Все элементы с class="name2" у которых родитель с class="name1".
    tag p Все <p> элементы.
    tag.class p.intro Все <p> элементы с class="intro".
    tag, tag div, p Все <div> и все <p> элементы.
    tag tag div p Все <p> внутри всех <div>.
    tag > tag div > p Все <p> прямой родитель которых <div>.
    tag + tag div + p <p> который находятся сразу после <div>.
    tag ~ tag div ~ p Все <p> которые находятся после <div>.
    [attribute] [target] Все элементы с target="что-либо".
    [attribute = value] [target=_blank] Все элементы с target="_blank".
    [attribute ^= value] a[href^="https"] Каждый <a> атрибут href которого начинается с "https".
    [attribute $= value] a[href$=".pdf"] Каждый <a> атрибут href которого заканчивается ".pdf".
    [attribute *= value] a[href*="w3schools"] Каждый <a> атрибут href которого содержит подстроку "w3schools".
    [attribute ~= value] [title~=flower] Все элементы в атрибуте title которых есть слово "flower".
    [attribute |= value] [lang|=en] Все элементы атрибут lang которых начинается с "en".
    :active a:active Активная ссылка.
    ::after p::after Вставляет псевод-элемент в начале каждого <p> элемента.
    ::before p::before Вставляет псевод-элемент в конце каждого <p> элемента.
    :checked input:checked Все выбранные <input type="checkbox"> элементы.
    :default input:default Все <input> элементы.
    :disabled input:disabled Все <input disabled> элементы.
    :empty p:empty Все пустые <p>, в которых нет пробелом, текста или других элементов.
    :enabled input:enabled Все активные (не disabled) элементы <input>.
    :first-child p:first-child Первый элемент в списке родительского элемента.
    :first-of-type p:first-of-type Первый <p> элемент в списке родительского элемента.
    ::first-letter p::first-letter Первая буква каждого <p> элемента.
    ::first-line p::first-line Первая линия каждого <p> элемента.
    :focus input:focus <input> в котором находится курсор.
    :focus-visible a:focus-visible Фокус сработает, только если на кнопку перешли с клавиатуры через TAB.
    :focus-within div:focus-within Сработает на блоке, когда его внутренний элемент находится в фокусе.
    :hover a:hover Сслыка на которую наведена мышка.
    :in-range input:in-range Все <input> со значением в пределах указанного диапазона.
    :indeterminate input:indeterminate Все <input> в статусе indeterminate.
    :invalid input:invalid Все <input> с недопустимым значением.
    :lang(language) p:lang(it) Все <p> с lang="it".
    :last-child p:last-child Последний элемент в списке родительского элемента.
    :last-of-type p:last-of-type Последний <p> в списке родительского элемента.
    :link a:link Все непосещенные ссылки.
    :not(selector) :not(p) Все не <p> элементы.
    :not(:only-child) div:not(:only-child) Все <div> внутри которых больше одного элемента.
    :nth-child(n) p:nth-child(2) Второй элемент в списке родительского элемента.
    :nth-of-type(n) p:nth-of-type(2) Второй <p> в списке родительского элемента.
    :nth-last-child(n) p:nth-last-child(2) Второй элемент в списке родительского элемента (счет идет с конца).
    :nth-last-of-type(n) p:nth-last-of-type(2) Второй <p> в списке родительского элемента (счет идет с конца).
    :only-child p:only-child Единственный <p> у родителя (других элементов быть не может).
    :only-of-type p:only-of-type Один <p> у родителя (других элементы могут быть).
    :optional input:optional Все <input> у которых нет артибута "required".
    :required input:required Все <input> у которых указан атрибут "required".
    :out-of-range input:out-of-range Все <input> со значением выходящим за указанный рэндж.
    ::placeholder input::placeholder Все <input> у которых указан атрибут "placeholder".
    :read-only input:read-only Все <input> у которых указан атрибут "readonly".
    :read-write input:read-write Все <input> у которых не указан атрибут "readonly".
    :root :root Корен документа.
    ::selection ::selection Выберет текущее выделение текста мышкой.
    :target #news:target Выберет элемент с id="news" когда к нему пришил по клику.
    :valid input:valid Все <input> с валидным значением.
    :visited a:visited Все посещенные ссылки.

Пользуйтесь на здоровье! Не забудьте сказать спасибо
Теги :
css селекторы
css селектор элемента
селекторы классов css
html css селекторы
css селектор по атрибуту
css селектор тега
соседний селектор css
css правила селекторов
селекторы стилей css
виды селекторов css
правильный css селектор
селекторы список
css селекторы список
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =

Последние комментарии :
вывы :
05.06.2022 12:32
сейчас яндекс добавил индексацию js в…
подробнее.
Марат :
02.06.2022 20:14
Михаил :
02.06.2022 20:10
Ну вот только для этого может быть ;) А так, нет смысла…
подробнее.
Марат :
02.06.2022 15:59
Чтобы вы зашли на данную страницу и нажали на…
подробнее.
Михаил :
02.06.2022 14:33
Ну вот только для этого может быть :) А так, нет смысла…
подробнее.
Алексей :
26.05.2022 14:19
👍👍👍
подробнее.
ruweb
Страница загружена за : 0.02542 секунд. Подробнее