В связи с переходом на новый движок... возможны сбои в работе! Простите!
Работы производятся прямо сейчас 19-03-2024! 🞨
Меню :
css (131)



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

Поделиться ссылкой! C друзьями или врагами!

Этим вы очень поможете проекту! Заранее огромное спасибо!

Ещё : dwweb.ru есть здесь:
ruweb
Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2024 Контакты. Реклама на сайте Лучший хостинг : RUWEB + помощь по RUWEB
Страница загружена за : 0.02143 секунд. Подробнее