css селекторы

css селекторы

Существует множество различных типов селекторов CSS, позволяющий позволяющих применять правила к конкретным элементам HTML-документа.

В следующий таблице перечислены наиболее часто используемые селекторы. На этой странице представлен HTML-файл, показывающий, к каким элементам будут применяться селекторы.


УНИВЕРСАЛЬНЫЙ

СЕЛЕКТОР 

Применяется ко всем

 элементам в документе 

 * {  }

 Все элементы 


СЕЛЕКТОР ТИПА

Соответствует именам

элементов

h1,  h2,  h3,  {  }

Элементы <h1>, <h2> и <h3>


СЕЛЕКТОР КЛАСС

Соответствует элементу, чей атрибут class имеет

значение, совпадающее с указанным после точки.

.note {  }

Элемент, чей атрибут  lclass  имеет значение note

p.note {  }

Только элементы <p>, чьи

атрибуты class имеют значение note


СЕЛЕКТОР ИДЕНТИФИКАТОРА

Соответствует элементу, чей атрибут id

имеет значение, совпадающее с указанным

после символа #

#introduction { }

Элемент, чей атрибут id имеет значение introduction


ДОЧЕРНИЙ СЕЛЕКТОР

Соответствует элементу, являющемуся прямым

потомков другого элемента

li>a {  }

Элементы <a>, располагающиеся внутри

<p>, даже в том случае, когда между ними находятся

другие элементы


СЕЛЕКТОР СЕСТРИНСКОГО ЭЛЕМЕНТА

Соответствует элементу,

являющемуся сестринским

по отношению к другому элементу

h1+p {  }

Первый элемент<p>,

располагающийся после любого элемента <p>, но не

любые другие элементы<p>


СЕЛЕКТОР ПОТОМКА

Соответствует элементу,  являющемуся потомком

другого элемента (не обязательно прямым)

p a {  }

Любые элементы <a>,

располагающиеся внутри <p>, даже в том случае,

когда между ними находятся другие элементы


СЕЛЕКТОР ОБОБЩЕННЫХ

РОДСТВЕННЫХ ЭЛЕМЕНТОВ

Соответствует элементу,

являющемуся сестринским по отношению

к другому элементу, хотя не обязательно

расположенному перед ним

h1~p {  }

Если бы у вас было два элемента <p>,

являющихся сестринскими по

отношению к элементу <h1>, то это правило бы

применялось к обоим


Ребята кому помок вставьте комментарий спасибо что зашли на мой блог был рад вам помочь.

Понравилась статья? Поделиться с друзьями:
Блог Измайлова Павла
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: