Css селектор типа

Второй заголовок h2 тега body

http-equiv=»Content-Type» content=»text/html;charset=UTF-8″>le>

В этом примере с использованием псевдокласса :nth-child мы стилизовали элементы

и , которые имеют определённый порядковый номер дочернего элемента внутри своих родительских элементов.

Результат нашего примера:


Рис. 24а Пример использования псевдоэлемента :last-child.

Стилизация по ключевому слову

В качестве значения псевдокласса :nth-child может выступать не только порядковый номер дочерних элементов, которые необходимо стилизовать, но и ключевые слова,
которые могут определять целую группу элементов. В качестве ключевого слова можно использовать два значения:

  • even (четные элементы)
  • odd (нечетные элементы)

Стилизация элементов с использованием ключевых слов имеет очень широкое применение, так как вы с легкостью можете выбрать и стилизовать четные, либо нечетные дочерние элементы в документе.

Давайте для примера создадим две простые таблицы с разными стилевыми классами и рассмотрим наглядно разницу в применении значений ключевых слов псевдокласса :nth-child для HTML элемента , который определяет строку таблицы:


charset = "UTF-8">
	Стилизация четных и нечетных дочерних элементов

«primer1»>
Значение even (четные)

1 строка

Позиция

Количество

2 строка

3 строка

4 строка

5 строка

«primer2»>
Значение odd (нечетные)

1 строка

Позиция

Количество

2 строка

3 строка

4 строка

5 строка

В этом примере с использованием псевдокласса :nth-child мы стилизовали четные строки первой таблицы (элементы ) и нечетные во второй таблице.

Рис. 24б Пример стилизации четных и нечетных дочерних элементов.

Стилизация по простой математической формуле

Псевдокласс :nth-child позволяет выбрать не только чётные, нечетные, или дочерние элементы с определённым порядковым номером, но и дочерние элементы, заданные по элементарной математической формуле.
Давайте рассмотрим следующий селектор и разберем, что значит эта запись:

td:nth-child(4n+2)  {
background-color: lightblue; /* устанавливаем цвет заднего фона */
}

Этот селектор означает, что каждая четвёртая ячейка таблицы (

) внутри строки, начиная со второй ячейки таблицы, будет стилизована:

  • 4n – каждый четвертый элемент.
  • 2 – с какого элемента начинать.

В формулах допускается использование значений со знаком вычитания, но в этом как правило нет необходимости:

td:nth-child(4n-1)  {
background-color: lightblue; /* устанавливаем цвет заднего фона */
}

Этот селектор означает, что каждая четвёртая ячейка таблицы (

) внутри строки, начиная с третьей ячейки таблицы (-1 ячейки нет по объективным причинам, поэтому происходит сдвиг влево), будет стилизована:

  • 4n – каждый четвертый элемент.
  • -1 – с какого элемента начинать.

Давайте рассмотрим пример использования:


charset = "UTF-8">
	Стилизация дочерних элементов по математической формуле
1 2 3 4 5 6 7 8 9 10 11 12 13 14
2
3
4

В этом примере с использованием псевдокласса :nth-child мы выбрали и стилизовали каждую четвёртую ячейку таблицы (

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

Рис. 25 Пример cтилизации дочерних элементов по математической формуле.

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практические задания:

  • Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файлы и изображения) в любую папку на вашем жестком диске:
  • Составьте следующие HTML страницы:
    1. Составьте селектор, который позволит Вам стилизовать все изображения, которые имеют глобальный атрибут title:

      Практическое задание № 5.

    2. Продвинутое задание: составьте селектор, который позволит Вам стилизовать все изображения, но не изображение, которое имеет значение атрибута alt равным «medved»:

      Практическое задание № 6.

    3. С использованием изученных псевдоклассов составьте селекторы, которые позволят Вам стилизовать абзацы (элементы ) в соответствии с изображением:

      Практическое задание № 7.

После того как вы выполните упражнения проинспектируйте коды страниц, открыв примеры в отдельном окне, чтобы убедиться, что вы все выполнили правильно.

Псевдоклассы
и псевдоэлементы

Селекторы. Часть 4.

×

Кажется, вы используете блокировщик рекламы 🙁

Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.

Как отключить?
Поддержать

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

Селекторы CSS

В CSS селекторы являются шаблонами, используемыми для выбора элементов, которые требуется присвоить стилю.

Используйте наш тестер селектора CSS для демонстрации различных селекторов.

Селектор Пример Пример описания
.class .intro Выбор всех элементов с class=»intro»
#id #firstname Выбор элемента с id=»firstname»
* * Выбор всех элементов
element p Выбор всех элементов
element,element div, p

Выбор всех элементов и всех элементов

element element div p Выбор всех

элементов внутри элементов

element>element div > p Выбор всех элементов

, в которых родительский элемент является элементом

element+element div + p Выбор всех

элементов, помещенных сразу после

элементов

element1~element2 p ~ ul Выбор каждого элемента

  • , которому предшествует элемент
[attribute] Выбор всех элементов с целевым атрибутом
[attribute=value] Выбор всех элементов с target=»_blank»
[attribute~=value] Выделяет все элементы с атрибутом title, содержащим слово «flower»
[attribute|=value] Выбор всех элементов со значением атрибута lang, начиная с «en»
[attribute^=value] a Выбирает каждый элемент , значение атрибута href которого начинается с «https»
[attribute$=value] a Выбирает каждый элемент , значение атрибута href которого заканчивается «.pdf»
[attribute*=value] a Выбирает каждый элемент , значение атрибута href которого содержит подстроку «html5css.ru»
:active a:active Выбор активной ссылки
::after p::after Вставка чего-либо после содержимого каждого элемента
::before p::before Вставка чего-либо перед содержимым каждого элемента
:checked input:checked Выбор каждого отмеченного элемента
:disabled input:disabled Выбор всех отключенных элементов
:empty p:empty Выбор каждого элемента

, не имеющего дочерних элементов (включая текстовые узлы)

:enabled input:enabled Выбор всех включенных элементов
:first-child p:first-child Выбирает каждый элемент

, являющийся первым дочерним элементом родительского элемента

::first-letter p::first-letter Выбор первой буквы каждого элемента
::first-line p::first-line Выбор первой строки каждого элемента
:first-of-type p:first-of-type Выбор каждого элемента

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

родительского элемента

:focus input:focus Выбор элемента ввода, имеющего фокус
:hover a:hover Выбор ссылок при наведении указателя мыши
:in-range input:in-range Выбор входных элементов со значением в указанном диапазоне
:invalid input:invalid Выбор всех входных элементов с недопустимым значением
:lang(language) p:lang(it) Выбирает каждый элемент

с атрибутом lang, равным «it» (Итальянский)

:last-child p:last-child Выбирает каждый элемент

, являющийся последним дочерним элементом родительского элемента

:last-of-type p:last-of-type Выбирает каждый элемент

, являющийся последним

элементом его родительского элемента

:link a:link Выбор всех непосещаемых ссылок
:not(selector) :not(p) Выбор каждого элемента, не являющегося элементом
:nth-child(n) p:nth-child(2) Выбирает каждый элемент

, являющийся вторым дочерним элементом родительского элемента

:nth-last-child(n) p:nth-last-child(2) Выбирает каждый элемент

, являющийся вторым дочерним элементом родительского объекта, считая от последнего дочернего элемента

:nth-last-of-type(n) p:nth-last-of-type(2) Выбирает каждый элемент

, являющийся вторым элементом

родительского элемента, считая от последнего дочернего элемента

:nth-of-type(n) p:nth-of-type(2) Выбор каждого элемента

, являющегося вторым элементом

родительского элемента

:only-of-type p:only-of-type Выбор каждого элемента

, являющегося единственным элементом

родительского элемента

:only-child p:only-child Выбирает каждый элемент

, являющийся единственным дочерним элементом родительского элемента

:optional input:optional Выбор входных элементов без атрибута «обязательный»
:out-of-range input:out-of-range Выбор входных элементов со значением за пределами заданного диапазона
:read-only input:read-only Выбор входных элементов с указанным атрибутом «ReadOnly»
:read-write input:read-write Выбор входных элементов с атрибутом «ReadOnly» не указан
:required input:required Выбор входных элементов с указанным атрибутом «required»
:root :root Выбор корневого элемента документа
::selection ::selection Выбор части элемента, выбранной пользователем
:target #news:target Выбор текущего активного элемента #news (щелчок по URL-адресу, содержащему это имя привязки)
:valid input:valid Выбор всех входных элементов с допустимым значением
:visited a:visited Выбор всех посещенных ссылок

❮ Назад
Дальше ❯

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function

backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside

caption-side
caret-color
@charset
clear
clip
clip-path
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor

direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-variant-caps
font-weight

grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows

hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing

line-height
list-style
list-style-image
list-style-position
list-style-type

margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode

object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y

padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes

resize
right

scroll-behavior

tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top

transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function

unicode-bidi
user-select

vertical-align
visibility

white-space
width
word-break
word-spacing
word-wrap
writing-mode

z-index

Pseudo-classes

A pseudo-class is a simple selector that is used to select what cannot be selected using other selectors or can be selected, but in a rather difficult way.

Pseudo-class Example Description CSS
:link Select all not visited links. 1
:visited Select all visited links. 1
:active Select the active link. 1
:hover Select a link when you hover the mouse. 1
:focus Select the input element that is in focus. 2
:first-child Selecting each element, which is the first child of its parent. 2
:lang(language) Selects each element with a attribute whose value begins with en. 2
:first-of-type Selects each element, which is the first of the elements of its parent element. 3
:last-of-type Select each element, which is the last of the elements of its parent element. 3
:only-of-type Select each element, which is the only element of its parent element. 3
:only-child Select each element, which is the only child of its parent element. 3
:nth-child(n) Select each element, which is the second child of its parent element. 3
:nth-last-child(n) Selects each element, which is the second child of its parent element, counting from the last child element. 3
:nth-of-type(n) Selects each element, which is the second child of its parent element. 3
:nth-last-of-type(n) Select each element, which is the second child of its parent element, counting from the last child element. 3
:last-child Select each element, which is the last element of its parent element. 3
:root Select the root element in the document. 3
:empty Select each element that does not contain child elements (including text). 3
:target Select the current target element on the page, that is, the element to which the link was moved inside the page. 3
:enabled Select each enabled . 3
:disabled Select each disabled . 3
:checked Select the element, that is selected by default or by the user. 3
:not(selector) Selects all elements except the element. 3

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
caption-side
caret-color
@charset
clear
clip
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor
direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows
hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
object-fit
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y
padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes
resize
right
tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top
transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function
unicode-bidi
user-select
vertical-align
visibility
white-space
width
word-break
word-spacing
word-wrap
z-index

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function

backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside

caption-side
caret-color
@charset
clear
clip
clip-path
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor

direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-variant-caps
font-weight

grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows

hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing

line-height
list-style
list-style-image
list-style-position
list-style-type

margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode

object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y

padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes

resize
right

scroll-behavior

tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top

transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function

unicode-bidi
user-select

vertical-align
visibility

white-space
width
word-break
word-spacing
word-wrap
writing-mode

z-index

CSS-селекторы одной таблицей

Таблица отсюда:

В крайней правой колонке я добавила информацию о поддержке селектора разными версиями IE.

Возможно, некоторые селекторы, работающие в IE7, могут работать и в IE6, но у меня пока не было возможности это проверить.

Pattern Meaning Type CSS level Support

*

any element 2

IE7+

E

an element of type E

1

All

E

an E element with a «foo» attribute

2

IE7+

E

an E element whose «foo» attribute value is exactly
equal to «bar»

2

IE7+

E

an E element whose «foo» attribute value is a list of
whitespace-separated values, one of which is exactly equal to «bar»

2

IE7+

E

an E element whose «foo» attribute value begins
exactly with the string «bar»

3

IE7+

E

an E element whose «foo» attribute value ends exactly
with the string «bar»

3

IE7+

E

an E element whose «foo» attribute value contains the
substring «bar»

3

IE7+

E

an E element whose «foo» attribute has a
hyphen-separated list of values beginning (from the left) with «en»

2

IE7+

E:root

an E element, root of the document

3

IE9+

E:nth-child(n)

an E element, the n-th child of its parent

3

IE9+

E:nth-last-child(n)

an E element, the n-th child of its parent, counting
from the last one

3

IE9+

E:nth-of-type(n)

an E element, the n-th sibling of its type

3

IE9+

E:nth-last-of-type(n)

an E element, the n-th sibling of its type, counting
from the last one

3

IE9+

E:first-child

an E element, first child of its parent

2

IE7+

E:last-child

an E element, last child of its parent

3

IE9+

E:first-of-type

an E element, first sibling of its type

3

IE9+

E:last-of-type

an E element, last sibling of its type

3

IE9+

E:only-child

an E element, only child of its parent

3

IE9+

E:only-of-type

an E element, only sibling of its type

3

IE9+

E:empty

an E element that has no children (including text
nodes)

3

IE9+

E:link
E:visited

an E element being the source anchor of a hyperlink of
which the target is not yet visited (:link) or already visited
(:visited)

1

All

E:active
E:hover
E:focus

an E element during certain user actions

1 and 2

All

E:target

an E element being the target of the referring URI

3

IE9+

E:lang(fr)

an element of type E in language «fr» (the document
language specifies how language is determined)

2

IE8+

E:enabled
E:disabled

a user interface element E which is enabled or
disabled

3

IE9+

E:checked

a user interface element E which is
checked (for instance a
radio-button or checkbox)

3

IE9+

E::first-line

the first formatted line of an E element

1

IE8+

E::first-letter

the first formatted letter of an E element

1

IE8+

E::before

generated content before an E element

2

IE8+

E::after

generated content after an E element

2

IE8+

E.warning

an E element whose class is «warning» (the document
language specifies how class is determined).

1

All

E#myid

an E element with ID equal to «myid».

1

All

E:not(s)

an E element that does not match simple selector s

3

IE9+

E F

an F element descendant of an E element

1

All

E > F

an F element child of an E element

2

IE7+

E + F

an F element immediately preceded by an E element

2

IE7+

E ~ F

an F element preceded by an E element

3 IE7+

Страницы • Статьи

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS MarginsCSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS FontsCSS IconsCSS LinksCSS ListsCSS TablesCSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS FloatCSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation BarCSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS Specificity

Все селекторы CSS как на ладони

Различают следующие типы селекторов CSS:

  • 1) универсальные селекторы,
  • 2) селекторы по названию тега,
  • 3) селекторы по классу,
  • 4) селекторы по id,
  • 5) селекторы по атрибуту,
  • 6) селекторы потомков, или контекстные селекторы,
  • 7) селекторы дочерние (только первые),
  • 8) селекторы сестринские, или соседние (расположенные на одном уровне),
  • 9) селекторы псевдоклассов (селекторы состояния),
  • 10) селекторы псевдоэлементов.

На видеоуроке будет подробно рассмотрен каждый тип селекторов CSS в отдельности

Универсальные селекторы CSS

Универсальные селекторы CSS обозначаются обыкновенной звездочкой «*». Под звездочкой может подразумеваться любой элемент разметки HTML-страницы.

CSS селекторы по названию тега

Запись селекторов по тегам также не представляет из себя никакой сложности. Выглядит она следующим образом:

где h1 — селектор по названию тега.

CSS селекторы по классам

Следующими в нашем списке видов селекторов CSS идут селекторы по классам. Напомним,, что «class» — это атрибут HTML-тега, он очень удобен тем, что может применяться к однотипным элементам. Название класса может быть каким угодно, главное, чтобы оно соответствовало тому элементу, который описывается CSS-правилом. Вообще атрибут «class» считается самым главным инструментом CSS.
При создании CSS-правила точка «.» перед именем класса обязательна.

CSS селекторы по id

К атрибутам HTML-тегов относится и id. Атрибут этот применяется к индивидуальному элементу, т.е. элемент с id может быть в единственном экземпляре на странице согласно правилам семантики. В каскадных таблицах стилей атрибуты эти используются крайне редко, их применение к ним вообще не приветствуется, они предназначены в основном для работы с javascript. На всякий случай полезно знать. что селектор по id в CSS-правиле оформляется так:

CSS селекторы потомков, или контекстные селекторы

Под CSS селекторами потомков, или контекстными селекторами подразумевается ситуация, когда один элемент HTML-страницы вложен в другой, причем не обязательно он должен быть первым потомком.

Дочерние селекторы CSS

Дочерние селекторы CSS отличаются от селекторов потомков тем, что под дочерним подразумевается только первый потомок, никакие «внуки» и «правнуки» не попадают в эту категорию.

Сестринские, или соседние селекторы CSS

При помощи сестринского селектора создается CSS-правило для HTML-элементов, расположенных на одном уровне, причем тот элемент, который записывается как сестринский должен быть самым ближайшим из себе подобных к тому элементу, к которому он записывается в «сестры».

CSS селекторы псевдоклассов

К селекторам псевдоклассов относятся селекторы CSS, которые описывают состояния элементов при совершении над ними какого-либо действия. Это могут быть наведение на элемент курсора мыши, клик по элементу и т.п. Записываются они через двоеточие к элементу, к которому применяются.

CSS селекторы псевдоэлементов

И последними на сегодняшнем видеоуроке будут рассмотрены CSS селекторы псевдоэлементов. Их прелесть заключается в том, что с их помощью (::before, ::after) можно добавлять различные элементы на веб-странички, но при этом псевдоэлементы никак не будут отражены в HTML-разметке этих страниц. Записываются они по отношению к элементу через двойное двоеточие.

Мы очень надеемся, что этот урок окажется весьма полезным для вас и послужит стимулом для дальнейшего изучения нашего видеокурса по основам CSS.

Приятного всем просмотра! Учитесь с удовольствием! Всегда ваш Loftblog.

Initialisation

HTML

Start with a standard select box you want to convert:

select id="mySelect">
	option value="value-1">Value 1option>
	option value="value-2">Value 2option>
	option value="value-3">Value 3option>
	...
select>

Javascript

You can then instantiate Selectr by passing a reference to your select box as the first parameter as either a DOM node or a CSS3 selector string:

new Selectr(document.getElementById('mySelect'));

// or

new Selectr('#mySelect');

Selectr accepts the options object as a second parameter:

new Selectr('#mySelect', {
	searchable false,
	width 300
});

Contributors

  • adrian-enspired
  • reno1979
  • snrbrnjna
  • TchernyavskyDaniil
  • istvanmakary
  • pepe4
  • ericboehs
  • detroxx92
  • jmromeroes
  • mirkopulvirenti
  • aslafy-z
  • Abduvakilov
  • jostermanAtPEW
  • mikeymckay
  • minajevs

If this project helps you then you can grab me a coffee or beer to say thanks.

License

Copyright 2016 Karl Saunders

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the «Software»), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED «AS IS», WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Все селекторы CSS (подробно)

Выбирает абсолютно все элементы на странице: «a, ul, li, div и т.д. Можно использовать для сброса стилей всех элементов. Например, такой код обнуляет внутренние и внешние отступы у всех элементов:

* { margin: 0; padding: 0; }

* можно использовать в связке с другими селекторами. Например, сделаем так чтобы все дочерние элементы выделялись сплошной черной рамкой шириной 1px.

#container * { border: 1px solid black; }

Применение * создает повышенную нагрузку на скорость работы браузера, поэтому используйте его только по необходимости.

Выбирает элемент у которого есть атрибут с указанным значением: class=»myclass».

Название класса, может состоять из латинских букв (a-zA-Z), цифр (0-9), символа дефиса и подчеркивания (- _).

Ссылка на основную публикацию