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

Последние комментарии :
Марат :
18.11.2022 17:21
Как же я вами завидую! Сколько у вас свободного…
подробнее.
>" :
18.11.2022 17:18
Читать тяжело. Я еще фильтрацию тегов потыкаю, если вы не…
подробнее.
Марат :
18.11.2022 17:17
А как восклицательные знаки? С ними всё нормально??? Или нет??? Вы к ним как…
подробнее.
Марат :
18.11.2022 17:15
В мире много разных отклонений... по статистике примерно 10% человек в странах имеют такие.... Была у меня…
подробнее.
qwe"> :
18.11.2022 17:00
Читать тяжело. Я еще фильтрацию тегов потыкаю, если вы не…
подробнее.
Марат :
20.10.2022 10:10
Очень рад за Вас!
подробнее.
ruweb
Страница загружена за : 0.026746 секунд. Подробнее