diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
| commit | 074785cea106179cb3305637055ab0a009ca74f2 (patch) | |
| tree | e6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/ru/web/css/_colon_only-child | |
| parent | da78a9e329e272dedb2400b79a3bdeebff387d47 (diff) | |
| download | translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2 translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip | |
initial commit
Diffstat (limited to 'files/ru/web/css/_colon_only-child')
| -rw-r--r-- | files/ru/web/css/_colon_only-child/index.html | 107 |
1 files changed, 107 insertions, 0 deletions
diff --git a/files/ru/web/css/_colon_only-child/index.html b/files/ru/web/css/_colon_only-child/index.html new file mode 100644 index 0000000000..2eb10c8a88 --- /dev/null +++ b/files/ru/web/css/_colon_only-child/index.html @@ -0,0 +1,107 @@ +--- +title: ':only-child' +slug: 'Web/CSS/:only-child' +tags: + - Псевдоклассы +translation_of: 'Web/CSS/:only-child' +--- +<div>{{CSSRef}}</div> + +<h2 id="Описание">Описание</h2> + +<p><a href="/ru/docs/CSS" title="CSS">CSS</a> <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдокласс</a> <code>:only-child</code> находит любой элемент, являющийся единственным потомком родителя. Это тоже, что и <code>:first-child:last-child</code> или <code>:nth-child(1):nth-last-child(1)</code>, но с меньшей специфичностью.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">parent child:only-child { + property: value; +} +</pre> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Простой_пример">Простой пример</h3> + +<pre class="brush: css">span:only-child { + color: red; +} +</pre> + +<pre class="brush: html"><div> + <span>Этот span единственный ребёнок своего папы:(</span> +</div> + +<div> + <span>Этот span один из потомков родителя</span> + <span>Этот span один из детей отца</span> +</div> +</pre> + +<h4 id="Результат">Результат</h4> + +<p>{{EmbedLiveSample('Простой_пример', '100%', 60)}}</p> + +<h3 id="Пример_со_списком">Пример со списком</h3> + +<pre class="brush: css">li li { + list-style-type: disc; +} +li:only-child { + color: #6699ff; + font-style: italic; + list-style-type: square; +}</pre> + +<pre class="brush: html"><ol> + <li>Первый + <ul> + <li>Это единственный ребёнок + </ul> + </li> + <li>Второй + <ul> + <li>Этот список с двумя элементами + <li>Этот список с двумя элементами + </ul> + </li> + <li>Третий + <ul> + <li>Этот список с тремя элементами + <li>Этот список с тремя элементами + <li>Этот список с тремя элементами + </ul> + </li> +<ol> +</pre> + +<h4 id="Результат_2">Результат</h4> + +<p>{{EmbedLiveSample('Пример_со_списком', '100%', 220)}}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#only-child-pseudo', ':only-child')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Без изменений</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#only-child-pseudo', ':only-child')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Изначальное определение</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<div>{{Compat("css.selectors.only-child")}}</div> |
