Jquery селектор :nth-child

Содержание:

Фон и границы¶
Пример использования
- Отличие :nth-child от :nth-of-type()
CSS Reference
CSS Properties
Псевдоклассы
CSS Properties
Приоритет селекторов
), то стиль p:first-child уже не будет отображаться, поскольку
- Четвертый ребенок
Синтаксис
Nth-Child Örnekleri
Как работает CSS-селектор nth-child
Псевдоклассы:first-child и first-of-type в чем разница?
:nth-of-type
- Комбинированные :nth-of-type
CSS Properties
Текст¶
Вопросы и задачи по теме

Фон и границы¶

background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-position-x
background-position-y
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-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
box-shadow

Пример использования

Наклонный текст html тег i курсив примеры

Рассмотрим пример, в котором главное содержимое страницы заключено в блоки <div>, которые имеют стилевой класс .test, и Вам необходимо придать определённый стиль вторым абзацам (элементы <p>) в этих блоках:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Псевдокласс :nth-of-type</title>
<style>
.test p:nth-of-type(2) { /* используем селектор потомков с псевдоклассом :nth-of-type */
background-color: orange; /* устанавливаем цвет заднего фона */
font-weight: bold; /* устанавливаем жирное начертание текста */
}
</style>
</head>
	<body>
		<div class = "test">
			<h2>Заголовок второго уровня</h2>
			<p>Абзац один</p>
			<p>Абзац два</p>
			<p>Абзац три</p>
		</div>
		<div class = "test"> 
			<h2>Заголовок второго уровня</h2>
			<p>Абзац один</p>
			<p>Абзац два</p>
			<p>Абзац три</p>
		</div>
	</body>
</html>

В этом примере с использованием псевдокласса :nth-of-type мы стилизовали первые абзацы внутри каждого блока.

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

Пример использования псевдокласса :nth-of-type.

Рассмотрим пример в котором с использованием псевдокласса :nth-of-type мы будем чередовать изображения слева и справа документа:

<html>
<head>
	<meta charset = "UTF-8">
	<title>Чередование изображений с использованием псевдокласса :nth-of-type</title>
<style>
img { 
width: 100px; /* ширина элемента */
height: 100px; /* высота элемента */
margin: 5px; /* внешние отступы со всех сторон */
}
img:nth-of-type(2n+1) { /* для данной задачи вместо формулы подойдут и значения ключевых слов even и odd (четные и нечетные дочерние элементы) */
float: left; /* элементы становятся плавающими (другие элементы их обтекают) и смещаются по левому краю */
border: 2px solid orange; /* устанавливаем сплошнаю границу размером 2 пикселя оранжевого цвета */
} 
img:nth-of-type(2n) { 
float: right; /* элементы становятся плавающими (другие элементы их обтекают) и смещаются по правому краю */
border: 2px solid gray; /* устанавливаем сплошнаю границу размером 2 пикселя серого цвета */
}
</style>
</head>
	<body>
		<img src = "nich.jpg" alt = "nich">
		<img src = "nich.jpg" alt = "nich">
		<img src = "nich.jpg" alt = "nich">
		<img src = "nich.jpg" alt = "nich">
	</body>
</html>

Результат примера:

Пример чередования изображений с использованием псевдокласса :nth-of-type

Отличие :nth-child от :nth-of-type()

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

Допустим, у нас есть статья, в которой два параграфа и мы хотим стилизовать абзац №2 отлично от первого, установив задний фон цвета khaki:

<article>
	<p>Первый параграф </p>
	<p>Второй параграф</p> 
</article>

Допустим мы стоим перед выбором какой селектор использовать: p:nth-child(2) или p:nth-of-type(2).
Попробуем проверить как работают оба варианта:

p:nth-child(2)  {
background-color: khaki; /* устанавливаем цвет заднего фона */
}
p:nth-of-type(2) {
background-color: khaki; /* устанавливаем цвет заднего фона */
}

Что не удивительно оба селектора работают для данной задачи. Но в чём разница?

Давайте рассмотрим на примере, ах да, мы добавим к нашей статье заголовок второго уровня (тег <h2>), про него мы совсем забыли:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Отличие :nth-child() от :nth-of-type()</title>
<style>
p:nth-of-type(2) {
background-color:khaki; /* устанавливаем цвет заднего фона */
}
p:nth-child(2) {
background-color:khaki; /* устанавливаем цвет заднего фона */
}
</style>
</head>
	<body>
		<article>
			<h2>Заголовок второго уровня</h2>
			<p>Первый параграф</p>
			<p>Второй параграф</p>
		</article>
	</body>
</html>

Сразу посмотрите на результат использования обоих селекторов в одном примере, затем будем разбираться почему так происходит:

Пример использования псевдоклассов :nth-of-type() и :nth-child().

В данном примере селектор p:nth-child(2) выбирает второй дочерний элемент своего родителя, а с добавлением заголовка второго уровня (тег <h2>) порядок элементов в родительком элементе изменился и это у нас стал первый абзац, а не второй, что для нас не приемлимо.
Для нашей задачи оптимальным выбором является использование селектора с псевдоклассом :nth-of-type по той причине, что он выбирает второй элемент того же типа, а у нас количество элементов этого типа не изменилось.

CSS селекторы

CSS Reference

Цветовая палитра ral соответствие rgb, pantone, cmyk

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

CSS Properties

How to vertically center text with css

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

Псевдоклассы

Еще одно уточнение для задания стилей. Расширяет наши возможности и сужает область применения без использования дополнительных классов и конструкций. Псевдоклассы задаются через символ двоеточия. Перечислим часто используемые и кратко познакомимся с ними:

first-child и last-child. Задает стили для первого и последнего дочернего элемента внутри родителя. Например, стили только для первого абзаца внутри контентной области.
nth-of-type. Идея схожа с предыдущем псевдоклассом. Указывает на элеменет в зависимости его расположения внутри родителя. Только здесь еще точнее, может отметить не только первый и последний элементо, но и с любым порядковым номер. Синтаксис такой селектор:nth-child(значение). Значение может быть целочисленное или заданное с помощью формулы. Например, для всех четных абзацей можно использовать такую запись:
hover. С помощью этого псевдокласса можно отследить такое действие пользователя, как наведение на элемент и задать при этом стилистические особенности. Например, при наведении на ссылку уберем ее подчеркивание.
:link, :visited и :active. Специальные псевдоклассы для работы со ссылками. С помощью них можно добавить стили непосещенных, посещенных и активных ссылок.
:focus. Псевдокласс для элементов в фокусе, например для input куда мы на данный момент вводим значение.

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 свойство некоторому элементу, приоритетным из них является то, в котором селектор имеет большую специфичность (вес).

Специфичность селекторов удобно представлять в виде 4 чисел: .

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

Если у сравниваемых селекторов все цифры равны, то будет применяться тот, который ниже из них расположен по коду.

Как считать эти цифры? Каждый селектор в зависимости от типа имеет вес:

универсальный селектор (не добавляет вес) – ;
селекторы по тегу, псевдоэлемент добавляют единичку к четвёртой цифре – ;
селекторы по классу и по атрибуту, псевдоклассы добавляют единичку ко третьей цифре – ;
селектор по идентификатору добавляют единичку ко второй цифре – ;

Стили, расположенные в атрибуте элемента, являются более специфичными по сравнению с селекторами. Вес этих стилей определяется единицей в первой цифре – .

Например:

– ;
– ;
– ;
– ;
– ;
– ;
– ;
– ;
– ;
– ;

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

Например:

<div class="alert-warning" style="background-color: #ffc107;"> ... </div>

В CSS:

.alert-warning {
  background-color: #ffa000 !important;
}

В этом примере элементу будет установлен тот фон к которому добавлено слово . перебивает любой вес.

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

В этом случае будет применено то значение CSS-свойства c у которого больше вес селектора.

К примеру, если добавить к CSS-свойству расположенному в , то получим максимальную возможную специфичность, которую уже никак не перебьёшь.

Например:

<p id="message" style="font-size: 20px !important;">...</p>

CSS:

p#message {
  font-size: 16px !important;
}

В этом примере к элементу будет применено CSS-свойство со значением 20px, т.к. хоть у каждого из них имеется состояние , но специфичность style () больше чем у селектора ().

), то стиль p:first-child уже не будет отображаться, поскольку

Перестанет быть первым дочерним тегом. В данном случае первым дочерним элементом будет h2 .

Всё то же самое происходит и с правилом p:last-child – стиль CSS будет применен к тегу

Лишь тогда, когда он будет являться последним дочерним элементом своего родителя
. Добавьте после

Любой другой тег отличного типа и вы увидите, что правило p:last-child перестанет применяться.

Правило p:nth-child(3) работает для третьего
дочернего тега

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

Правила tr:nth-child(odd) и tr:nth-child(even) работают для нечётных и чётных элементов tr соответственно. Вы можете увидеть результат на скриншоте, а также скопировать весь код и поэкспериментировать со стилями самостоятельно.

Второй ребенок

Третий ребенок

Четвертый ребенок

Пятый ребенок

Последний ребенок

/* CSS */
p:first-of-type {
color: violet;
text-transform: uppercase;
}
p:last-of-type {
font-style: italic;
font-size: 0.8em;
}
p:nth-of-type(3) {
color: red;
}
p:nth-of-type(odd) {
background-color: #A2DED0;
}
p:nth-of-type(even) {
background-color: #C8F7C5;
}
h3:only-of-type {
text-decoration: underline;
}
Скриншот: применение:first-of-type, :last-of-type, :nth-of-type и:only-of-type

Первое правило CSS, которое вы видите – это p:first-of-type . Что оно делает? Оно выбирает дочерний элемент типа p , который первым
встречается у родителя

И не важно, на каком месте среди элементов других типов находится данный тег – на первом, втором или десятом. В этом и заключается отличие между псевдоклассами:first-child и:first-of-type

Второе правило – p:last-of-type – применяет стиль к последнему
дочернему элементу типа p . Как видно из HTML-кода, после последнего тега

Есть еще и тег

Синтаксис

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

B:first-child {
text-decoration: underline;
}

Такое правило подчеркнет текст первого элемента b внутри каждого контейнера.

Все хотят изменить мир сам.
Лев Толстой
Тот, кто умеет, тот делает, кто не умеет — тот учит других.
Бернард Шоу

На скриншоте очевидно, что выделились только элементы, соответствующие одновременно селектору тега b и селектору псевдокласса:first-child. Стиль был применен внутри каждого контейнера, в данном случае внутри всех пунктов списка.

Помимо тега, в качестве основного можно использовать любой другой селектор CSS, например:

Class:first-child {}
:first-child {}
*:first-child {}

Nth-Child Örnekleri

1) ilk elmentin arkaplan rengini turuncu yapın.

CSS:

.kutu:nth-child(1){
background: #e67e22;
}

1
2
3
4
5

.kutu:nth-child(1){

background#e67e22;

}

2) Sondan 3. elementi seçiniz.

CSS:

.kutu:nth-last-child(3){
background: #e67e22;
}

1
2
3
4
5

.kutu:nth-last-child(3){

background#e67e22;

}

3) Tek olan elementleri seçiniz.

CSS: oddile

.kutu:nth-child(odd){
background: #e67e22;
}

1
2
3
4
5

.kutu:nth-child(odd){

background#e67e22;

}

CSS: formül ile:

.kutu:nth-child(2n-1){
background: #e67e22;
}

1
2
3
4
5

.kutu:nth-child(2n-1){

background#e67e22;

}

4) Çift olan elementleri seçiniz.

CSS: even ile

.kutu:nth-child(even){
background: #e67e22;
}

1
2
3
4
5

.kutu:nth-child(even){

background#e67e22;

}

CSS: formül ile

.kutu:nth-child(2n){
background: #e67e22;
}

1
2
3
4
5

.kutu:nth-child(2n){

background#e67e22;

}

5) Altının katı olan elementleri seçiniz.

CSS:

.kutu:nth-child(6n){
background: #e67e22;
}

1
2
3
4
5

.kutu:nth-child(6n){

background#e67e22;

}

6) İlk sütundaki elementleri seçiniz.(1,7,13 ..)

CSS:

.kutu:nth-child(6n+1){
background: #e67e22;
}

1
2
3
4
5

.kutu:nth-child(6n+1){

background#e67e22;

}

7) Şekildeki gibi 1,8 ve 15. elementleri seçiniz.( Seçim işleminde dikkat edilmesi gereken aradaki farktır. fark n çarpanını işaret edecektir.)

CSS:

.kutu:nth-child(7n+1){
background: #e67e22;
}

1
2
3
4
5

.kutu:nth-child(7n+1){

background#e67e22;

}

8) İkinci sütundaki değerleri seçiniz. (Yine aynı şekilde aradaki farka bakıp sayı arttırılacak mı eksiltilecek mi karar verilir. Aradaki fark 6 olduğu için 6n çarpanı vardır. başlangıç değeri de 2den başlamıştır.

CSS:

.kutu:nth-child(6n+2){
background: #e67e22;
}

1
2
3
4
5

.kutu:nth-child(6n+2){

background#e67e22;

}

9)Aşağıdaki gibi bir seçme işlemi nasıl yapılır?

CSS:

.kutu:nth-child(5n-3){
background: #e67e22;
}

1
2
3
4
5

.kutu:nth-child(5n-3){

background#e67e22;

}

Beğendim!2
1

Как работает CSS-селектор nth-child

В CSS существует селектор, если быть более точным, псевдо-селектор, называемый nth-child. Пример его использования:

Вышеприведённый CSS делает следующее: применяет стиля для каждого третьего элемента ненумерованного списка. А именно 3-го, 6-го, 9-го, 12-го и т.д. Но как это работает? А также какую выгоду можно извлечь используя nth-child?

Основной смысл заключается в выражении в скобках. nth-child принимает два ключевых слова: even (чётный) и odd (нечётный). Смысл их абсолютно ясен. Even выбирает чётные элементы (2, 4, 6), odd — нечётные (1, 3, 5).

Как показано в примере выше, nth-child может обрабатывать выражения. Какое самое простое возможное выражение? Просто число. Если вы напишите какое-нибудь число в скобках, то будет выбран один единственный элемент. Например, выберем пятый элемент списка:

Вернёмся к нашему первому примеру, в котором мы использовали выражение (3n+3). Как он работает? Почему он выбирает каждый третий элемент? Вся суть в переменной n. Она принимает целые значения от нуля и больше. Давайте рассмотрим подробнее:

Теперь попробуем следующее выражение: nth-child(2n+1):

В итоге получили тоже самое что и в случае с odd, таким образом нет нужды часто использовать такое выражение. Более того, наш первый пример тоже можно упростить и использовать вместо оригинального выражения (3n+3), выражение (3n):

Как видите, результат тот же, но не надо писать «+3». Также мы можем использовать отрицательные значения в выражении. Например, 4n-1:

Использование отрицательных значений для коэффициента при n, выглядит слегка странно, потому что в случае отрицательного результата не будет найдено соответствие. Вам надо будет постоянно изменять выражение, чтобы добавить положительных элементов. Как оказалось, этот подход очень удобен для выбора первых n элементов. Рассмотрим пример с «-n+3»:

Псевдоклассы:first-child и first-of-type в чем разница?

Для того, чтобы в css обратиться к первому элементу из родительского контейнера, были придуманы два псевдокласса. Я сразу же предлагаю рассмотреть все на примере, чтобы вы поняли:

Это абзац

Допустим, имеем такую разметку. Цель – обратиться к первому абзацу и стилизовать его отдельно от других без дописывания ему классов. Это можно сделать так:

#wrapper p:first-child{
Color: red;
}

Цвет первого абзаца станет красным, можете проверить.

#wrapper p:first-of-type{
color: red;
}

Произойдет то же самое. Так в чем же разница? А она заключается в том, что псевдокласс first-of-type ищет и находит первый элемент родителя, учитывая его тип, а first-child ничего не ищет – он просто берет первый попавшийся элемент родителя и если это абзац, то применяет к нему стили. Если нет, то ничего не выберется и не применится.

Это абзац

А теперь подумайте: сработает ли в этом случае first-of-type ? Да, потому что он учитывает тип элемента и выберет именно первый абзац, а не первый из вообще всех элементов. А first-child сработает? Попробуйте. Ничего не получится, потому что абзац не стоит первым элементом в родителе.

Лично я не сразу понял разницу между этими псевдоклассами и какое-то время путался, но сейчас, я надеюсь, нормально вам объяснил.

:nth-of-type

Похож на предыдущий псевдокласс, но учитывает тип элемента

Возьмем блок и разместим в него через один теги и. Для наглядности сделаем круглыми, а квадратными, а нумерацию не сквозную, а по тегам.

Для начала попробуем простые выражения для псевдокласса

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

See the Pen pozaJYr by Websitio (@Websitio) on CodePen.

Выберем нечетные и четные

See the Pen dybdoLE by Websitio (@Websitio) on CodePen.

Комбинированные :nth-of-type

Зададим фон нечетным только из первых 5ти

Зададим фон четным после 5го

See the Pen aboqOrR by Websitio (@Websitio) on CodePen.

CSS Properties

Текст¶

hanging-punctuation
hyphens
letter-spacing
line-break
overflow-wrap
paint-order
tab-size
text-align
text-align-last
text-indent
text-justify
text-size-adjust
text-transform
white-space
word-break
word-spacing

letter-spacing
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-decoration-thickness
text-decoration-skip
text-decoration-skip-ink
text-emphasis
text-emphasis-color
text-emphasis-position
text-emphasis-style
text-indent
text-rendering
text-shadow
text-underline-position
text-transform
white-space
word-spacing

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

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

Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файлы и изображения) в любую папку на вашем жестком диске:
Составьте следующие HTML страницы:
1. Составьте селектор, который позволит Вам стилизовать все изображения, которые имеют глобальный атрибут title:
  
  Практическое задание № 5.
2. Продвинутое задание: составьте селектор, который позволит Вам стилизовать все изображения, но не изображение, которое имеет значение атрибута alt равным «medved»:
  
  Практическое задание № 6.
3. С использованием изученных псевдоклассов составьте селекторы, которые позволят Вам стилизовать абзацы (элементы <p>) в соответствии с изображением:
  
  Практическое задание № 7.

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

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

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