СКРИПТЫ
ТЕГИ:
php (325)
js (242)
html (146)
css (130)
html tags (62)
js tag (56)
jquery (42)
text (37)
js method (36)
php array (33)
js date (33)
form html (30)
online (28)
fonts (26)
link (26)
Показать еще :
ruweb.net (25)
foto (22)
php file (20)
atom (20)
forum (19)
svg (18)
input (18)
hosting (18)
php date (17)
html book (16)
php time (16)
board (16)
color (15)
js url (14)
img (14)
js events (14)
js time (14)
info (13)
select (13)
osclass (13)
htaccess (13)
notepad (13)
знак (12)
php path (12)
keyboard (12)
php img (12)
download (12)
table (12)
dw block (12)
jsphp (11)
form (11)
icon (11)
yandex (10)
mouse (10)
js delete (10)
keyframes (10)
hover (9)
dosite (8)
browser (7)
cookie (7)
comment (7)
php url (7)
php get (6)
click (6)
mysql (6)
canvas (6)
list (6)
iframe (6)
js math (5)
reg.ru (5)
adminka (5)
mb (5)
heading (5)
tag a (5)
chart (5)
search (5)
ftp (5)
year (5)
js id (5)
value (5)
base64 (4)
day (4)
нок (4)
flags (4)
week (4)
xml (4)
scandir (4)
ssl (4)
bbcode (4)
php var (4)
games (4)
console (4)
js form (4)
vk (4)
pages (4)
submit (4)
month (4)
symbols (4)
task (4)
https (3)
js hash (3)
js post (3)
domen (3)
money (3)
vs code (3)
куб (3)
js img (3)
ucoz (3)
padding (3)
captcha (3)
numbers (3)
line (3)
tag hr (2)
qr kod (2)
youtube (2)
video (2)
рся (2)
sitemap (2)
counter (2)
details (2)
prompt (2)
typeof (2)
google (2)
height (2)
arrows (2)
seo (2)
js vars (2)
smile (1)
scroll (1)
speed (1)
нод (1)
archive (1)
header (1)
windows (1)
rutube (1)
jino (1)
cursor (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
Подписаться + =

ruweb dwweb.ru есть здесь:
Последние комментарии :
Марат :
15.08.2023 17:50
Значит в "maxv" сидит…
подробнее.
михаил :
15.08.2023 16:53
а если это сделано для диаграммы values / maxv)…
подробнее.
Марат :
17.07.2023 15:50
Спасибо за интересный вопрос! Посмотрите …
подробнее.
Александр :
17.07.2023 14:58
а как сделать чтобы при повторном клике значение value возвращалось к…
подробнее.
Марат :
30.06.2023 10:18
Спасибо за внимательность!
подробнее.
???? :
29.06.2023 15:37
Прямоугольник - это геометрическая фигура, у которой три угла…
подробнее.
Немного о ruweb.net!
Страница загружена за : 0.020713 секунд. Подробнее