wwwoldi.ru

About Me

Dashy

Hello word I am dashy Guy

Разное

Html first child: Псевдокласс :first-child | htmlbook.ru

alexxlab
No Comments

Содержание

Псевдокласс :first-child | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
7.0+1.0+3.5+1.0+1.0+1.0+1.0+

Краткая информация

Версии CSS

Описание

Псевдокласс :first-child применяет стилевое оформление к первому дочернему элементу своего родителя.

Синтаксис

элемент:first-child { … }

Значения

Нет.

Пример 1

XHTML 1.0CSS2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>first-child</title>
  <style type="text/css">
    B:first-child {
     color: red; /* Красный цвет текста */
    }
  </style>
 </head>
 <body>
   <p><b>Lorem ipsum</b> dolor sit amet, <b>consectetuer</b> 
   adipiscing <b>elit</b>, sed diem nonummy nibh euismod tincidunt ut lacreet 
   dolore magna aliguam erat volutpat. </p>
   <p><b>Ut wisis enim</b> ad minim veniam, <b>quis nostrud</b> 
   exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea <b>commodo 
   consequat</b>.</p>
 </body>
</html>

Результат примера показан на рис. 1. В данном примере псевдокласс :first-child добавляется к селектору b и устанавливает для него красный цвет текста. Хотя контейнер <b> встречается в первом абзаце три раза, красным цветом будет выделено лишь первое упоминание, т.е. текст «Lorem ipsum». В остальных случаях содержимое контейнера <b> отображается черным цветом. Со следующим абзацем все начинается снова, поскольку родительский элемент поменялся. Поэтому фраза «Ut wisis enim» также будет выделена красным цветом.

Рис. 1. Выделение цветом первого дочернего элемента абзаца

Пример 2

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Меню</title>
  <style>
   . links { 
    background: #F6967D; /* Цвет фона */
   }
   .links a {
    color: #FFFDEB; /* Цвет ссылок */
    display: inline-block; /* Строчно-блочный элемент */
    border-left: 1px solid #B62025; /* Параметры рамки слева */
    padding: 5px 10px; /* Поля вокруг ссылок */
   }
   .links a:first-child {
    border-left: none; /* Убираем первую линию слева */
   }
  </style>
 </head>
 <body>
  <div>
    <a href="1.html">uno</a>
    <a href="2.html">dos</a>
    <a href="3.html">tres</a>
    <a href="4.html">cuatro</a>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2. Ссылки с линией слева

Почему не срабатывает :first-child? — Хабр Q&A

Почитав здесь вопрос и ответы, я понял свою ошибку. Хочу поделиться 🙂

У нас есть меню

<div>
		<div>
			<ul>
				<li><a href="#">Вызов курьера</a></li>
				<li><a href="#">Сотрудничество</a></li>
				<li><a href="#">Новости</a></li>
				<li><a href="#">Статьи</a></li>
				<li><a href="#">Видеоблог</a></li>
			</ul>
		</div>
	</div>

И мне нужно было к каждой пункту меню сделать справа и слева бордеры разных цветов
НО! у первого пункта нужно было отменить левый бордер, а у последнего — правый.

Сделал так: к каждой !ССЫЛКЕ! (.top-line .menu ul li a) я применил бордеры:

.top-line .menu ul li {
	float: left;
	padding: 6px 0px;
}

.top-line .menu ul li a {
	color: #474747;
	font-size: 0.857em;
	text-decoration: none;
	padding: 7px 15px;
	border-left: 1px solid #fff;
	border-right: 1px solid #c7c7c7;
}

.top-line .menu ul li a:first-child { border-left: none; }
.top-line .menu ul li a:last-child { border-right: none; }

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

.top-line .menu ul li a:first-child { border-left: none; }
.top-line .menu ul li a:last-child { border-right: none; }

И не работали псевдоклассы :first-child и :last-child! Ломал голову. Была ночь 4 часа утра.

На утро дошло 😀

У нас же только одна ссылка внутри li! Какие тут псевдоклассы?!

Поэтому применил бордеры к .top-line .menu ul li.
Псевдоклассы применил к .top-line .menu ul li.

И все заработало 🙂

Полный правильный код ниже:

<div>
		<div>
			<ul>
				<li><a href="#">Вызов курьера</a></li>
				<li><a href="#">Сотрудничество</a></li>
				<li><a href="#">Новости</a></li>
				<li><a href="#">Статьи</a></li>
				<li><a href="#">Видеоблог</a></li>
			</ul>
		</div>
	</div>
. top-line .menu ul li {
	float: left;
	padding: 6px 0px;
	border-left: 1px solid #fff;
	border-right: 1px solid #c7c7c7;
}

.top-line .menu ul li a {
	color: #474747;
	font-size: 0.857em;
	text-decoration: none;
	padding: 7px 15px;
}

.top-line .menu ul li:first-child { border-left: none; }
.top-line .menu ul li:last-child { border-right: none; }

CSS3 | Псевдоклассы дочерних элементов

Псевдоклассы дочерних элементов

Последнее обновление: 21.04.2016

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

  • :first-child: представляет элемент, который является первым дочерним элементом

  • :last-child: представляет элемент, который является последним дочерним элементом

  • :only-child: представляет элемент, который является единственным дочерним элементом в каком-нибудь контейнере

  • :only-of-type: выбирает элемент, который является единственным элементом определенного типа (тега) в каком-нибудь контейнере

  • :nth-child(n): представляет дочерний элемент, который имеет определенный номер n, например, второй дочерний элемент

  • :nth-last-child(n): представляет дочерний элемент, который имеет определенный номер n, начиная с конца

  • :nth-of-type(n): выбирает дочерний элемент определенного типа, который имеет определенный номер

  • :nth-last-of-type(n): выбирает дочерний элемент определенного типа, который имеет определенный номер, начиная с конца

Псевдокласс first-child

Используем псевдокласс first-child для выбора первых ссылок в блоках:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
			a:first-child{
			
				color: red;
			}
        </style>
    </head>
    <body>
		<h4>Планшеты</h4>
		<div>
			<a>Microsoft Surface Pro 4</a><br/>
			<a>Apple iPad Pro</a><br/>
			<a>ASUS ZenPad Z380KL</a>
		</div>
		<h4>Смартфоны</h4>
		<div>
			<p>Топ-смартфоны 2016</p>
			<a>Samsung Galaxy S7</a><br/>
			<a>Apple iPhone SE</a><br/>
			<a>Huawei P9</a>
		</div>
    </body>
</html>

Стиль по селектору a:first-child применяется к ссылке, если она является первым дочерним элементом любого элемента.

В первом блоке элемент ссылки является первым дочерним элементом, поэтому к нему применяется определенный стиль.

А во втором блоке первым элементом является параграф, поэтому ни к одной ссылке не применяется стиль.

Псевдокласс last-child

Используем псевдокласс last-child:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
			a:last-child{
			
				color: blue;
			}
        </style>
    </head>
    <body>
		<h4>Смартфоны</h4>
		<div>
			<a>Samsung Galaxy S7</a><br/>
			<a>Apple iPhone SE</a><br/>
			<a>Huawei P9</a>
		</div>
		<h4>Планшеты</h4>
		<div>
			<a>Microsoft Surface Pro 4</a><br/>
			<a>Apple iPad Pro</a><br/>
			<a>ASUS ZenPad Z380KL</a>
			<p>Данные за 2016</p>
		</div>
    </body>
</html>

Селектор a:last-child определяет стиль для ссылок, которые являются последними дочерними элементами.

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

Селектор only-child

Селектор :only-child выбирает элементы, которые являются единственными дочерними элементами в контейнерах:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
		p:only-child{
			color:red;
		}
        </style>
    </head>
    <body>
		<h3>Заголовок</h3>
		<div>
			<p>Текст1</p>
		</div>
		<div>
			<p>Текст2</p>
			<p>Текст3</p>
		</div>
		<div>
			<p>Текст4</p>
		</div>
	</body>
</html>

Параграфы с текстами «Текст1» и «Текст4» являются единственными дочерними элементами в своих внешних контейнерах, поэтому к ним применяется стиль — красный цвет шрифта.

Псевдокласс only-of-type

Псевдокласс only-of-type выбирает элемент, который является единственным элементом определенного типа в контейнере. Например, единственный элемент div, при этом
элементов других типов в этом же контейнере может быть сколько угодно.


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
		span:only-of-type{
		
			color: green;	/* зеленый цвет */
		}
		p:only-of-type{
		
			color: red;	/* красный цвет */
		}
		div:only-of-type{
		
			color: blue;	/* синий цвет */
		}
        </style>
    </head>
    <body>
		<div>
			Header
		</div>
		<p>Единственный параграф и <span>элемент спан</span></p>
		<div>
			Footer
		</div>
	</body>
</html>

Хотя для элементов div определен стиль, он не будет применяться, так как в контейнере body находится два элемента div, а не один. Зато в body есть
только один элемент p, поэтому он получит стилизацию. И также в контейнере p есть только один элемент span, поэтому он также будет стилизован.

Псевдокласс nth-child

Псевдокласс nth-child позволяет стилизовать каждый второй, третий элемент, только четные или только нечетные элементы и т.д.

Например, стилизуем четные и нечетные строки таблицы:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
			tr:nth-child(odd) { background-color: #bbb; }
			tr:nth-child(even) { background-color: #fff; }
        </style>
    </head>
    <body>
		<h4>Смартфоны</h4>
		<table>
			<tr><td>Samsung</td><td>Galaxy S7 Edge</td><td>60000</td></tr>
			<tr><td>Apple</td><td>iPhone SE</td><td>39000</td></tr>
			<tr><td>Microsoft</td><td>Lumia 650</td><td>13500</td></tr>
			<tr><td>Alcatel</td><td>Idol S4</td><td>30000</td></tr>
			<tr><td>Huawei</td><td>P9</td><td>60000</td></tr>
			<tr><td>HTC</td><td>HTC 10</td><td>50000</td></tr>
			<tr><td>Meizu</td><td>Pro 6</td><td>40000</td></tr>
			<tr><td>Xiaomi</td><td>Mi5</td><td>35000</td></tr>
		</table>
    </body>
</html>

Чтобы определить стиль для нечетных элементов, в селектор передается значение «odd»:

tr:nth-child(odd){}

Для стилизации четных элементов в селектор передается значение «even»:

tr:nth-child(even){}

Также в этот селектор мы можем передать номер стилизуемого элемента:

tr:nth-child(3) { background-color: #bbb; }

В данном случае стилизуется третья строка.

Еще одну возможность представляет использование заменителя для номера, который выражается буквой n:

tr:nth-child(2n+1) { background-color: #bbb; }

Здесь стиль применяется к каждой второй нечетной строке.

Число перед n (в данном случае 2) представляет тот дочерний элемент, который будет выделен следующим. Число, которое идет после знака плюс,
показывают, с какого элемента нужно начинать выделение, то есть, +1 означает, что нужно начинать с первого дочернего элемента.

Таким образом, в данном случае выделение начинается с 1-го элемента, а следующим выделяется 2 * 1 + 1 = 3-й элемент, далее 2 * 2 + 1 = 5-й элемент и так далее.

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

tr:nth-child(3n+2) { background-color: #bbb; }

Псевдокласс :nth-last-child по сути предоставляет ту же самую функциональность, только отсчет элементов идет не с начала, а с конца:


tr:nth-last-child(2) { 
	background-color: #bbb; /* 2 строка с конца, то есть предпоследняя  */
}
tr:nth-last-child(2n+1) {  
	background-color: #eee; /* нечетные строки, начиная с конца  */
}

Псевдокласс nth-of-type

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


tr:nth-of-type(2) { 
	background-color: #bbb;
}

Аналогично работает псевдокласс nth-last-of-type, только теперь отсчет элементов идет с конца:


tr:nth-last-of-type(2n) { 
	background-color: #bbb;
}

html — Почему селектор CSS: first-child: not (.

ignore) не исключает класс ignore из выбора?

Как я могу использовать :first-child с :not(.ignore), чтобы выбрать каждый элемент, который является первым дочерним элементом своего родителя, если только этот первый дочерний элемент не принадлежит к классу ignore?

Что я пробовал: :first-child:not(.ignore){...}, :first-child :not(.ignore){...}, я также встречал этот ответ, который сформулирован так, как будто это то, что я ищу, однако спрашивающий, похоже, не понимает, как работает селектор :first-child. Кроме того, один из ответов предполагает, что :first-child:not(.ignore){...} должен работать именно так, как я ожидал, но для мне это просто не так.

Мой вопрос: я что-то упускаю в синтаксисе или просто невозможно комбинировать селекторы таким образом?

:first-child:not(.ingore){
    background-color:lightblue;
}
<body >
        <div>
            <div>
                should be blue and is blue
            </div>
            <div>
                should also be blue as it's parent is blue due to being first child of 'body'
            </div>
        </div>
    
        <div>
            <div>
                should not be blue but is blue 
            </div>
            <div>
                should not be blue and is not blue
            </div>
        </div>
 </body>

0

mikeskk

9 Ноя 2020 в 14:51

1 ответ

Лучший ответ

Первая проблема в том, что вы допустили орфографическую ошибку. ingore и ignore не совпадают.

Кроме того, элемент html соответствует вашему селектору, а background-color по умолчанию для div равен transparent.

Таким образом, селектор не соответствует div и становится синим, вы можете просто видеть синий фон элемента html сквозь него.

body :first-child:not(.ignore){
    background-color:lightblue;
}
<body>
  <div>
    <div>
      should be blue and is blue
    </div>
    <div>
      should also be blue as it's parent is blue due to being first child of 'body'
    </div>
  </div>

  <div>
    <div>
      should not be blue but is blue
    </div>
    <div>
      should not be blue and is not blue
    </div>
  </div>
</body>

1

Quentin
9 Ноя 2020 в 11:55

Псевдокласс :nth-child() | CSS справочник

CSS селекторы

Значение и применение

Псевдокласс :nth-child() позволяет выбрать дочерние элементы внутри родительского элемента в зависимости от их размещения (порядкового номера).

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

Поддержка браузерами

CSS синтаксис:

:nth-child(номер | ключевое слово | формула) {
блок объявлений;
}

Версия CSS

CSS3

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

Стилизация по порядковому номеру

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

Пример выбора селектора дочерних элементов.

Что общего у элементов, выделенных на изображении? А общее у них то, что они выделены оранжевым цветом. Смешно? Не думаю.
Общее у них все же есть, элементы <li> являются вторыми дочерними элементами своих родителей, а элемент <h3> тоже можно посчитать, и его порядковый номер будет третьим (третий дочерний элемент своего родителя <body>). Чтобы стилизовать эти элементы, нам необходимо использовать псевдокласс :nth-child.

Перейдем к примеру:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Псевдокласс :first-child</title>
<style>
/* групповой селектор, который выбирает каждый третий дочерний элемент <h3> своего родителя
и каждый второй элемент <li> своего родителя  */
h3:nth-child(3), li:nth-child(2) { 
background-color: orange; /* устанавливаем цвет заднего фона */
}
</style>
</head>
	<body>
		<h3>Первый заголовок h3 тега body</h3>
		<ul>
			<li>один</li>
			<li>два</li>
			<li>три</li>
		</ul>
		<h3>Второй заголовок h3 тега body</h3>
		<article>
			<h3>Первый заголовок h3 тега article</h3>
			<ul>
				<li>один</li>
				<li>два</li>
				<li>три</li>
			</ul>
		</article>
	</body>
</html>

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

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

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

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Стилизация четных и нечетных дочерних элементов</title>
<style>
. primer1 tr:nth-child(even)  { /* стилизация четных дочерних элементов */
background-color: #AAA; /* устанавливаем цвет заднего фона */
}
.primer2 tr:nth-child(odd)  { /* стилизация нечетных дочерних элементов */
background-color: #AAA; /* устанавливаем цвет заднего фона */
}
caption {/* селектор типа (выбираем HTML элемент <caption>) */
color: red; /* устанавливаем цвет текста */
}
</style>
</head>
	<body>
		<table class = "primer1">
			<caption>Значение even (четные)</caption>
			<tr>
				<th>1 строка</th><th>Позиция</th><th>Количество</th>
			</tr>
			<tr>
				<td>2 строка</td><td></td><td></td>
			</tr>
			<tr>
				<td>3 строка</td><td></td><td></td>
			</tr>
			<tr>
				<td>4 строка</td><td></td><td></td>
			</tr>
			<tr>
				<td>5 строка</td><td></td><td></td>
			</tr>
		</table>
		<table class = "primer2">
			<caption>Значение odd (нечетные)</caption>
			<tr>
				<th>1 строка</th><th>Позиция</th><th>Количество</th>
			</tr>
			<tr>
				<td>2 строка</td><td></td><td></td>
			</tr>
			<tr>
				<td>3 строка</td><td></td><td></td>
			</tr>
			<tr>
				<td>4 строка</td><td></td><td></td>
			</tr>
			<tr>
				<td>5 строка</td><td></td><td></td>
			</tr>
		</table>
	</body>
</html>

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

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

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

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

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

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

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

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Стилизация дочерних элементов по математической формуле</title>
<style>
td, th{ /* групповым селектором выбираем заголовочные ячейки и ячейки данных */
border: 1px solid green; /* задаём сплошную границу размером 1 пиксель зеленого цвета */
width: 50px;  /* устанавливаем ширину заголовочным ячейкам и ячейкам данных */
}
td:nth-child(4n+2) {
background-color: lightblue; /* устанавливаем цвет заднего фона */
}
</style>
</head>
	<body>
		<table>
			<tr>
				<th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th><th>10</th><th>11</th><th>12</th><th>13</th><th>14</th>
			</tr>
			<tr>
				<td>2</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
			</tr>
			<tr>
				<td>3</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
			</tr>
			<tr>
				<td>4</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
			</tr>
		</table>
	</body>
</html>

В этом примере с использованием псевдокласса :nth-child мы выбрали и стилизовали каждую четвёртую ячейку таблицы (<td>) внутри строки, начиная со второй ячейки таблицы.
Результат нашего примера:

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

Отличие :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; /* устанавливаем цвет заднего фона */
}

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

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

<!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>
			<h3>Заголовок второго уровня</h3>
			<p>Первый параграф</p>
			<p>Второй параграф</p>
		</article>
	</body>
</html>

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

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

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

CSS селекторы

Оформление таблицы с помощью псевдоклассов

С помощью стандартных способов оформления можно задать стиль для таблицы и всех её строк. Но как быть, если требуется, например, выделить отдельную ячейку? Чтобы не задавать для ячейки class, можно воспользоваться комбинацией селекторов и псевдоклассов.

В данном уроке приведены различные варианты отбора элементов таблицы с помощью структурных псевдоклассов.

<table>
<tr><th>Company</th><th>Q1</th><th>Q2</th><th>Q3</th><th>Q4</th></tr>
<tr><td>Microsoft</td><td>20.3</td><td>30.5</td><td>23.5</td><td>40. 3</td></tr>
<tr><td>Google</td><td>50.2</td><td>40.63</td><td>45.23</td><td>39.3</td></tr>
<tr><td>Apple</td><td>25.4</td><td>30.2</td><td>33.3</td><td>36.7</td></tr>
</table>

1. Первая срока таблицы

th {background: #C9E3FE}

CompanyQ1Q2Q3Q4
Microsoft20.330.523.540.3
Google50.240.6345.2339.3
Apple25.430.233.336.7

2. Последняя строка таблицы

tr:last-child {background: #C9E3FE}

CompanyQ1Q2Q3Q4
Microsoft20.330.523. 540.3
Google50.240.6345.2339.3
Apple25.430.233.336.7

3. Третья строка таблицы

tr:nth-child(3){background:#C9E3FE}

CompanyQ1Q2Q3Q4
Microsoft20.330.523.540.3
Google50.240.6345.2339.3
Apple25.430.233.336.7

4. Таблица-зебра (каждая четная строка)

tr:nth-child(even) {background: #C9E3FE}

CompanyQ1Q2Q3Q4
Microsoft20.330.523.540.3
Google50.240.6345.2339.3
Apple25. 430.233.336.7

5. Таблица-зебра (каждая нечетная строка)

tr:nth-child(odd) {background: #C9E3FE}

CompanyQ1Q2Q3Q4
Microsoft20.330.523.540.3
Google50.240.6345.2339.3
Apple25.430.233.336.7

6. Первая ячейка первой строки таблицы

th:first-child {background: #C9E3FE}

CompanyQ1Q2Q3Q4
Microsoft20.330.523.540.3
Google50.240.6345.2339.3
Apple25.430.233.336.7

7. Последняя ячейка первой строки таблицы

th:last-child {background: #C9E3FE}

CompanyQ1Q2Q3Q4
Microsoft20.330.523.540.3
Google50.240.6345.2339.3
Apple25.430.233.336.7

8. Первая ячейка последней строки таблицы

tr:last-child td:first-child {background: #C9E3FE}

CompanyQ1Q2Q3Q4
Microsoft20.330.523.540.3
Google50.240.6345.2339.3
Apple25.430.233.336.7

9. Последняя ячейка последней строки таблицы

tr:last-child td:last-child {background: #C9E3FE}

CompanyQ1Q2Q3Q4
Microsoft20.330.523.540.3
Google50.240.6345.2339.3
Apple25.430.233.336.7

10. Третья ячейка третьей строки таблицы

tr:nth-child(3) td:nth-child(3) {background: #C9E3FE}

CompanyQ1Q2Q3Q4
Microsoft20.330.523.540.3
Google50.240.6345.2339.3
Apple25.430.233.336.7

11. Первый столбец таблицы

th:first-child, td:first-child {background: #C9E3FE}

CompanyQ1Q2Q3Q4
Microsoft20.330.523.540.3
Google50.240.6345.2339.3
Apple25.430.233.336.7

12. Третий столбец таблицы

td:nth-child(3), th:nth-child(3) {background: #C9E3FE}

CompanyQ1Q2Q3Q4
Microsoft20.330.523.540.3
Google50.240.6345.2339.3
Apple25.430.233.336.7

13. Последний столбец таблицы

th:last-child, td:last-child {background: #C9E3FE}

CompanyQ1Q2Q3Q4
Microsoft20.330.523.540.3
Google50.240.6345.2339.3
Apple25.430.233.336.7

Селекторы псевдоклассов и псевдоэлементов в CSS (hover, first-child, first-line и другие), отношения между тегами Html кода

Обновлено 10 января 2021

  1. Отношения между тегами Html кода — дерево документа
  2. Селекторы псевдоклассов — hover, focus и first-child
  3. Селекторы псевдоэлементов — first-line (letter), after и before

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

Тема селекторов в CSS, которая была начата в предыдущей статье, осталась еще не завершенной, ибо мы рассмотрели только пять из семи возможных типов (тега и класса (class), Id, универсальный и атрибутов) и на очереди остались селекторы псевдоклассов и псевдоэлементов.

Отношения между тегами Html кода — дерево документа

Давайте начнем с псевдоклассов. Тут, правда, сначала нужно будет сделать отступление. Любой браузер, получая документ с любым языком разметки, тут же начинает его разбирать. Модуль, отвечающий в браузере за это дело, обычно называют парсер — он разбирает код, исправляет ошибки и формирует так называемое дерево.

Результат работы парсера любого браузера можно увидеть с помощью некоторых плагинов или расширений для этих обозревателей. Например, все тот же незаменимый плагин для Firefox под названием Firebug показывает это самое дерево документа:

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

Таких взаимоотношений может быть всего три вида (очень похоже на построение генеалогического дерева — отношение между родственниками):

  1. Предки и потомки. Например, для тега, показанного на приведенном выше примере, все остальные элементы являются потомками. Для них же всех он является прародителем — предком. Т.е. все, что находится внутри — это потомки. А предками будут являться все элементы, внутри которых данный элемент лежит.
  2. Родитель и ребенок — в цепочке предки-потомки всегда есть два ближайших звена, которые будут отвечать понятиям родитель и ребенок. Т.е. у любого Html элемента есть один родитель (ближайший предок) и в то же время у него могут быть или не быть один или же несколько детей.
  3. Сестринские (братские) отношения — к ним относятся элементы, у которых один общий родитель.

Само по себе название «псевдоклассы» обозначает то, что специально в коде ни у каких элементов (тегов) такие классы (значения для атрибута Class) никто не прописывал, но у этих самых элементов периодически могут возникать определенные динамические состояния, для которых и были придуманы селекторы псевдоклассов.

Селекторы псевдоклассов — hover, focus, first-child и другие

Например, селекторы Link и Visited во всех браузерах могут использоваться только для оформления гиперссылок:

Link подразумевает под собой не посещенную ссылку (по которой пользователь еще не переходил), а Visited — посещенную. Таким образом вы можете настроить, например, изменение цвета для уже посещенных пользователем ссылок, ну или еще что-то другое (задать визуальное состояние для всех посещенных гиперссылок). Естественно, что посещенные будут учитываться именно для данного конкретного браузера и до момента очистки его истории.

Синтаксис написания селекторов псевдоклассов заключается в проставлении двоеточия после названия Html элемента, для которого вы его используете (a:visited).

a:visited {color:red;}

Следующие три селектора (active, hover и focus) могут использоваться для любых тегов:

Active соответствует клику левой кнопки мыши по тому элементу в Html коде, название которого вы прописали перед этим псевдоклассом в селекторе (в нашем примере это тег гиперссылки A). Как только левую клавишу пользователь отожмет — псевдокласс active исчезнет.

p:active {color:red}

В этом случае, при наведении курсора мыши на любой абзац текста и щелчке по левой кнопке мыши, мы увидим, что цвет этого параграфа изменится на красный. После отжатия кнопки цвет абзаца опять вернется к принятому по умолчанию. Т.е. данный псевдокласс active динамичен и будет работать абсолютно для любых тэгов (например, для контейнеров Div и т.п.). При клике на этом элементе он может изменить свое визуальное оформление в соответствии с нашими пожеланиями.

Hover — позволяет изменять визуальное оформление любого элемента в Html коде при наведении на него курсора мыши. При отведении курсора визуальное оформление элемента вернется к используемому по умолчанию.

p:hover {color:red}

Псевдокласс focus — позволяет изменять визуальное оформление тегов находящимся сейчас в фокусе. Как известно, фокус на веб странице можно переносить с помощью нажатия на клавишу Tab на клавиатуре. Причем, фокус может передаваться только между следующими элементам: ссылки и элементы форм в Html.

Псевдоклассы active и hover в браузере IE 6 работают только для элементов гиперссылок, а focus не работает вообще ни в IE 6, ни в IE 7.

Последний псевдокласс называется first-child (первый ребенок, в переводе).

:first-child {color:red}

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

First-child в IE 6 не работает, что печально.

Селекторы псевдоэлементов — first-line (letter), after и before

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

По самому слову «псевдоэлементы» понятно, что таких тегов в Html коде нет. На данный момент псевдоэлементов всего четыре и они приведены на расположенном чуть выше рисунке. Наверное, понятно по самому названию, что first-line будет указывать на первую линию, а first-letter — на первую букву.

Причем, оба этих псевдоэлемента применяются только к блочным тегам (заголовки, параграфы, контейнеры и т.п.) и как это ни печально, но в браузере IE 6 они тоже не работают.

p:first-line {color:red}

Что это даст? Во всех параграфах на веб странице первые строки текста окрасятся в красный цвет. Для простоты подключим CSS к языку Html с помощью тега style и пропишем соответствующее свойство с использованием псевдоэлемента first-line в селекторе параграфа:

Тогда, как мы и планировали, все первые строки в абзацах окрасятся в красный цвет:

Ну, а с помощью first-letter можно сделать, например, так называемую буквицу (когда первая буква в абзаце отличается большим размером и цветом). Для этого можно будет прописать следующие CSS плавила для данного селектора псевдоэлемента:

p:first-letter {font-size:5em; float:left; color:red}

Про Em, Ex, пиксели и другие размерности в CSS мы с вами уже говорили. Исходный код с добавленными свойствами тогда будет выглядеть так:

А сама вебстраница с буквицей, созданной с помощью селектора first-letter, будет выглядеть так:

Два оставшихся псевдоэлемента after и before нужны для формирования контента на лету. Давайте посмотрим на примере:

p:after {
content: " KtoNaNovenkogo.ru";
color:red;
}

В результате, в конце каждого абзаца на вебстранице автоматически добавится тот фрагмент, который мы указали в CSS свойстве «content» (оно используется только для псевдоэлементов after и before) и этот фрагмент будет окрашен в красный цвет:

Если бы мы вместо «after» использовали бы «before», то дополнительный контент был бы добавлен внутри каждого абзаца на странице, но уже перед его содержимым. Напрашивается вопрос — а для чего это можно использовать на практике?

Оказывается, с помощью этих псевдоэлементов можно, например, создать сложную нумерацию вида «5.2.13». Обычными средствами Html этого сделать нельзя, а с использованием before — можно.

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

Но при этом имеет место быть сложный код CSS стилей с использованием, естественно, псевдоэлементов after и before:

Все очень здорово, но, к сожалению, after и before не поддерживаются в браузерах IE 6 и IE 7. Увы и ах. В следующей статье мы поговорим про комбинации CSS селекторов и их приоритетность.

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

HTML-узел DOM firstChild Свойство

Элемент Объект

Пример

Получить HTML-содержимое первого дочернего узла элемента

    :

    var x = document.getElementById («myList»). firstChild.innerHTML;

    Попробуй сам »

    Дополнительные примеры «Попробуйте сами» ниже.

    Определение и использование

    Свойство firstChild возвращает первый дочерний узел указанного узла как объект узла.

    Разница между этим имуществом и
    firstElementChild, это то, что
    firstChild возвращает первый дочерний узел как узел элемента, текстовый узел или
    узел комментария (в зависимости от того, какой из них первый), а firstElementChild возвращает
    первый дочерний узел как узел элемента (игнорирует узлы текста и комментариев).

    Примечание: Пробел внутри элементов считается текстом, и
    текст считается узлами (см. «Дополнительные примеры»).

    Это свойство доступно только для чтения.

    Совет: Используйте элемент .childNodes
    свойство, чтобы вернуть любой дочерний узел указанного узла. childNodes [0] будет
    дают тот же результат, что и firstChild.

    Совет: Чтобы вернуть последний дочерний узел указанного узла, используйте
    свойство lastChild.

    Поддержка браузера

    Объект
    первый ребенок Есть Есть Есть Есть Есть

    Синтаксис

    Технические характеристики

    Возвращаемое значение: Объект Node, представляющий первого дочернего элемента узла, или null , если дочерних узлов нет
    Версия DOM Базовый объект-узел уровня 1

    Другие примеры

    Пример

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

    Получить имя узла первого дочернего узла элемента

    :

    Пробелы внутри элементов считаются текстом, а текст — узлами
    В этом примере есть пробелы до, до и после
    Следовательно, первым дочерним узлом является узел #text, а не тот элемент, который вы ожидали.
    — ->

    Похоже на первого ребенка

    Похоже на последнего ребенка

    Попробуй сам »

    Пример

    Однако, если мы удалим пробелы из источника, #text не будет
    узлов в

    , что сделает элемент

    первым дочерним узлом:

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

    Попробуй сам »

    Пример

    Получить текст первого дочернего узла элемента
    элемент:

    var x = document.getElementById («mySelect»). firstChild.text;

    Результат x будет:

    Audi

    Попробуй сам »

    Связанные страницы

    Ссылка на HTML DOM: узел . lastChild Недвижимость

    Ссылка на HTML DOM: узел . Свойство childNodes

    Ссылка на HTML DOM: узел . Свойство parentNode

    Ссылка на HTML DOM: узел . следующийСобственный объект недвижимости

    Ссылка на HTML DOM: узел . предыдущийСобственность близнецов

    Ссылка на HTML DOM: узел . свойство nodeName

    Элемент Объект

    : первый ребенок — CSS — W3cubDocs

    Псевдокласс CSS : first-child представляет первый элемент среди группы родственных элементов.

     / * Выбирает любой 
    , который является первым элементом
   среди его братьев и сестер * /
p: first-child {
  цвет: салатовый;
}

    Примечание : Как первоначально определено, выбранный элемент должен иметь родителя. Начиная с уровня селекторов 4, это больше не требуется.

    Синтаксис 

    : первый ребенок

    Примеры

    Базовый пример

    HTML 
     
    
  
     Этот текст выделен! 
    
  
     Этот текст не выбран.
    

    


    
  
     Этот текст не выделен: это не `p`. 
    
  
     Этот текст не выбран.
    CSS 
     p: first-child {
  цвет: салатовый;
  цвет фона: черный;
  отступ: 5 пикселей;
}
    Результат

    Стилизация списка

    HTML 
     
      
  
    •  Пункт 1 
      • 
  
    •  Пункт 2 
      • 
  
    •  Пункт 3
    
        
      
      •  Пункт 3.1 
        • 
      
      •  Пункт 3.2 
        • 
      
      •  Пункт 3.3 
        • 
    
      
  
      •
    CSS 
     ul li {
  цвет синий;
}

ul li: first-child {
  красный цвет;
  font-weight: жирный;
}
    Результат

    Технические характеристики

    Настольный
    Хром Край Firefox Internet Explorer Opera Safari
    : первенец 4 12 3 7

    7
    Internet Explorer 7 не обновляет стили : first-child , когда элементы добавляются динамически.
    В Internet Explorer 8, если элемент вставляется динамически при нажатии на ссылку, то стиль : first-child не применяется, пока ссылка не потеряет фокус.
    		 9,5 3,1
    Соответствует элементам без родительского элемента 57 79 52 Нет 44 Нет
    мобильный
    Android веб-просмотр Chrome для Android Firefox для Android Opera для Android Safari на iOS Интернет Samsung
    : первенец ≤37 18 4 10.1 4 1,0
    Соответствует элементам без родительского элемента 57 57 52 43 Нет 7,0

    См. Также

    CSS Псевдо-класс -: first-child

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

    Пример:

      p: first-child {
   цвет фона: светло-зеленый;
}

    В приведенном выше примере цвет фона (светло-зеленый) устанавливается для первого дочернего элемента под родительским элементом, когда первый дочерний элемент является элементом P.

    Пример 1) Установите цвет фона (светло-зеленый) для первого дочернего элемента под каждым родительским элементом, когда первый дочерний элемент является элементом P.

      


     Селектор псевдокласса CSS -: first-child 
     <стиль>
            р: первенец
            {
                цвет фона: светло-зеленый;
            }
     


    
     1-й ребенок (P) родителя (BODY) 
    

    
    
        
     ----- 1-й дочерний элемент (P) родительского элемента (DIV) 
    
        
     ----- 2-й дочерний элемент (P) родительского элемента (DIV) 
    
    
    

    
    
         1-й дочерний элемент (SPAN) родителя (DIV) 
        
     2-й ребенок (P) родителя

    В приведенном выше примере

    • Элемент P является первым дочерним элементом родительских элементов BODY и DIV.Таким образом, для этих двух элементов установлен цвет фона «светло-зеленый».
    • Элемент SPAN (не элемент P) является первым дочерним элементом второго родительского элемента DIV. Таким образом, для этого элемента не установлен цвет фона.

    Используя следующее дерево объектной модели документа (DOM), объясняется приведенный выше пример.

      


     Селектор псевдокласса CSS -: first-child 
    


    
    
        
     - Дочерний (DIV - P) 
    
        
     - Дочерний (DIV - P) 
    
        
    
            
     -------- Внук (DIV - DIV - P) 
    
            
     -------- Внук (DIV - DIV - P) 
    
            
    
                
     ---------------- Правнук (DIV - DIV - DIV - P) 
    
            
    
        
    
    
    
    
    
        
     - Дочерний (DIV - P) 
    
    
    
    
     Элемент P 
    
    
     Элемент P

    В приведенном выше примере устанавливается зеленый цвет фона шрифта для первого дочернего элемента под каждым родительским (DIV) элементом.

    Используя следующее дерево объектной модели документа (DOM), объясняется приведенный выше пример.

    Шпаргалка по

    Xpath

    Тестирование

    Стенд Xpath

    Тестовые запросы на стенде Xpath:

    Консоль браузера 

      $ x ("// div")

    Работает в Firefox и Chrome.

    Селекторы

    Селекторы потомков

    CSS Xpath?
    h2 // h2 ?
    div p // div // p ?
    ul> li // ул / ли ?
    ul> li> a // ул / ли / а
    div> * // div / *
    : корень /?
    : корень> тело / корпус

    Селекторы атрибутов

    CSS Xpath?
    #id // * [@ id = "id"] ?
    . = '/'] // a [начинается с (@href, '/')] ?
    a [href $ = 'pdf'] // a [заканчивается на (@href, '.pdf ')]
    a [href * = ': //'] // a [содержит (@href, ': //')]
    a [rel ~ = 'help'] // a [contains (@rel, 'help')] … вроде

    Селекторы заказов

    CSS Xpath?
    ul> li: первый в своем роде // ul / li [1] ?
    ul> li: nth-of-type (2) // ul / li [2]
    ul> li: последний тип // ul / li [last ()]
    li # id: first-of-type // li [1] [@ id = "id"] ?
    a: первенец // * [1] [name () = "a"]
    a: последний ребенок // * [last ()] [name () = "a"]

    Братья и сестры

    CSS Xpath?
    h2 ~ ul // h2 / следующий брат :: ul ?
    h2 + ul // h2 / следующий-брат :: ul [1]
    h2 ~ # id // h2 / следующий-брат :: [@ id = "id"]

    jQuery

    CSS Xpath?
    $ ('ul> li').родитель () // ул / ли / .. ?
    $ ('li'). Ближайший ('раздел') // li / ancestor-or-self :: section
    $ ('a'). Attr ('href') // а / @ href ?
    $ ('диапазон'). Text () // диапазон / текст ()

    Разное

    CSS Xpath?
    h2: not ([id]) // h2 [not (@id)] ?
    Соответствие текста // кнопка [text () = "Отправить"] ?
    Соответствие текста (подстрока) // кнопка [содержит (text (), «Go»)]
    Арифметика // товар [@price> 2.50]
    Имеет детей // ul [*]
    Имеет детей (специфических) // ul [li]
    Или логика // a [@name или @href] ?
    Union (присоединяется к результатам) // а | // div ?

    Проверка класса 

      // div [содержит (concat ('', normalize-space (@class), ''), 'foobar')]

    Xpath не имеет оператора «проверить, является ли часть списка, разделенного пробелами», поэтому это обходной путь (источник).

    Выражения

    Ступени и топоры

    // ул. / a [@ id = 'link']
    Ось Шаг Ось Шаг

    Префиксы

    Начните свое выражение лица с любого из них.

    Оси

    Разделите свои шаги с помощью /. Используйте два ( // ), если не хотите выбирать прямых потомков.

    ступеней 

      // div
// div [@ name = 'box']
// [@ id = 'ссылка']

    Шаг может иметь имя элемента ( div ) и предикаты ( [...] ). Оба варианта не обязательны.
    Также это могут быть следующие вещи:

      // a / text () # => «Иди домой»
// a / @ href # => "index.html"
// a / * # => Все дочерние элементы a

    Предикаты

    Предикаты 

      // div [true ()]
// div [@ class = "head"]
// div [@ class = "head"] [@ id = "top"]

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

    Операторы 

      # Сравнение
// a [@id = "xyz"]
// a [@id! = "xyz"]
// a [@price> 25]
  
      # Логика (и / или)
// div [@ id = "head" и position () = 2]
// div [(x и y) или нет (z)]

    Используйте операторы сравнения и логические операторы для создания условных выражений.

    Использование узлов 

      # Используйте их внутри функций
// ul [count (li)> 2]
// ul [count (li [@ class = 'hide'])> 0]
  
      # Это возвращает `
      `, у которого есть дочерний элемент `
    • `
// ul [li]

    Вы можете использовать узлы внутри предикатов.

    Индексирование 

      // a [1] # первый 
// a [last ()] # последний 
// ol / li [2] # секунда 
  • 
// ol / li [position () = 2] # то же, что и выше
// ol / li [position ()> 1] #: not (: first-of-type)

    • Используйте [] с числом или последняя () или позиция () .

    Цепной заказ 

      a [1] [@ href = '/']
а [@href = '/'] [1]

    Порядок значительный, эти два разные.

    Вложенные предикаты 

      //section[.//h2[@id='hi ']]

    Возвращает

    , если у него есть потомок

    с id = 'hi' .

    Функции

    Узловые функции 

      name () # // [начинается с (name (), 'h')]
text () # // кнопка [text () = "Отправить"]
                           # // кнопка / текст ()
lang (str)
пространство имен-uri ()
  
      count () # // таблица [count (tr) = 1]
position () # // ol / li [position () = 2]

    Логические функции 

      not (expr) # button [not (начинается с (text (), "Submit"))]

    Строковые функции 

      contains () # font [contains (@class, "head")]
начинается с () # шрифт [начинается с (@class, "head")]
заканчивается на () # шрифт [заканчивается на (@class, "head")]
  
      concat (x, y)
подстрока (str, start, len)
substring-before ("01/02", "/") # => 01
substring-after ("01/02", "/") # => 02
переведите()
нормализовать-пробел ()
длина строки ()

    Преобразование типа 

      строка ()
номер()
логическое значение ()

    Топоры

    Использование осей 

      // ul / li # ul> li
// ul / child :: li # ul> li (то же самое)
// ul / следующий-брат :: li # ul ~ li
// ul / потомок или сам :: li # ul li
// ul / предок-или-сам :: li # $ ('ul').ближайший ('ли')

    Шаги выражения разделены /, обычно используются для выбора дочерних узлов. Это не всегда верно: вы можете указать другую «ось» с помощью :: .

    // ул. / ребенок :: ли
    Ось Шаг Ось Шаг

    Дочерняя ось 

      # оба одинаковые
// ul / li / a
// ребенок :: ul / child :: li / child :: a

    child :: - ось по умолчанию.Это делает // a / b / c работоспособным.

      # оба одинаковые
# это работает, потому что `child :: li` истинно, поэтому предикат выполняется успешно
// ul [li]
// ul [child :: li]
  
      # оба одинаковые
// ul [count (li)> 2]
// ul [count (child :: li)> 2]

    Самостоятельная ось 

      # оба одинаковые
// div // h5
// div / потомок или сам :: h5

    // - это сокращение от оси -потомок :: .

      # оба одинаковые
// ul // [last ()]
// ul / потомок или сам :: [last ()]

    Оси прочие

    Вы можете использовать и другие топоры.

    Союзы 

      // а | //охватывать

    Использование | , чтобы соединить два выражения.

    Еще примеры

    Примеры 

      // * # все элементы
count (// *) # подсчитываем все элементы
(// h2) [1] / text () # текст первого заголовка h2
// li [span] # находим 
  •  с  внутри
                    # ... заменяется на // li [child :: span]
// ul / li / .. # use .. для выбора родителя

    • Найди родителей 

      // раздел [h2 [@ id = 'section-name']]

    Находит

    , который непосредственно содержит h2 # section-name 

      // раздел [// h2 [@ id = 'section-name']]

    Находит <раздел> , содержащий h2 # имя-раздела .

    No related posts.

    Share :

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *