Type css: Атрибут type | htmlbook.ru

Leave a Comment / Css / By /

Содержание

Псевдокласс :only-of-type | CSS | WebReference

  • Содержание
    • Синтаксис
    • Пример
    • Спецификация
    • Браузеры

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

В качестве примера рассмотрим следующий код HTML:

<article>
  <h2>Роль цитокинов при дорсалгии</h2>
  <p>Автор: Гордон Фримен, канд. физ.-мат. наук</p>
  <p>Содержание статьи</p>
  <address>Почта: [email protected]</address>
  <p>Опубликовано: <time datetime="2018-11-27">27 ноября 2018</time></p>
</article>

Псевдокласс :only-of-type без указания селектора выберет все единственные элементы каждого типа внутри <article> и установит для них красный цвет текста. Здесь единственными являются элементы <h2>, <address> и <time>.

article :only-of-type { color: red; }

При добавлении селектора к :only-of-type сперва рассматривается указанный элемент, затем проверяется, является ли он единственным.

Здесь красным цветом будет выделен заголовок, поскольку <h2> только один.

article h2:only-of-type { color: red; }

Если вместо h2 использовать селектор p, то ничего выбрано не будет, поскольку внутри <article> встречается несколько абзацев и элемент <p> не является единственным.

article p:only-of-type { color: red; }

Вместо :only-of-type можно использовать комбинации :first-of-type:last-of-type или :nth-of-type(1):nth-last-of-type(1).

Синтаксис 

Селектор:only-of-type { ... }

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>only-of-type</title> <style> img:only-of-type { border: 2px solid red; /* Параметры рамки */ } </style> </head> <body> <p><img src=»image/figure. jpg» alt=»»> <img src=»image/figure.jpg» alt=»»></p> <p><img src=»image/figure.jpg» alt=»»></p> </body> </html>

В примере псевдокласс :only-of-type применяется к селектору img, в правилах стиля которого задаётся рамка красного цвета для картинок. Сама рамка добавляется к изображениям, которые у своих родителей (в данном случае это <p>) встречаются только один раз. В первой строке повторяется два изображения, поэтому псевдокласс не действует, во второй строке вставлено одно изображение, для него :only-of-type и работает.

Рис. 1. Применение псевдокласса :only-of-type к картинкам

Спецификация

СпецификацияСтатус
Selectors Level 4Рабочий проект
Selectors Level 3Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

91219.53. 23.5
2.11103.2

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузера, начиная с которой свойство поддерживается.

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

См. также

  • :only-child и :only-of-type
  • Псевдокласс :only-child

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 03.08. 2018

Редакторы: Влад Мержевич

list-style-type — Справочник CSS

❮ Назад CSS Справочник Далее ❯


Пример

Установить несколько разных списка стилей:

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

Попробуйте сами »

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

Свойство list-style-type указывает тип элемента списка, маркер списка.

Значение по умолчанию:
disc
Унаследованный:да
Анимируемый:нет. Прочитать о animatable
Версия:CSS1
JavaScript синтаксис:object.style.listStyleType=»square» Попробовать

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

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

Свойство
list-style-type1.04.01.01.03.5

Примечание: Internet Explorer/Edge и Opera 12 и более ранние версии не поддерживают значение: cjk-ideographic, hebrew, hiragana, hiragana-iroha, katakana, и katakana-iroha.

CSS Синтаксис

list-style-type: value;

Значения свойств

ЗначениеОписаниеВоспроизвести
discЗначение по умолчанию. Маркер закрашенный кругВоспроизвести »
armenianМаркер традиционная армянская нумерацияВоспроизвести »
circleМаркер пустой кругВоспроизвести »
cjk-ideographicМаркер простые идеографические чиселаВоспроизвести »
decimalМаркер числаВоспроизвести »
decimal-leading-zeroМаркер представляет собой число с ведущими нулями (01, 02, 03, и т. д.)Воспроизвести »
georgianМаркер традиционная грузинская нумерацияВоспроизвести »
hebrewМаркер традиционная нумерация иудейскаяВоспроизвести »
hiraganaМаркер традиционная нумерация хираганаВоспроизвести »
hiragana-irohaМаркер традиционная нумерация хирагана ирохаВоспроизвести »
katakanaМаркер традиционная нумерация катаканаВоспроизвести »
katakana-irohaМаркер традиционная нумерация катакана ирохаВоспроизвести »
lower-alphaМаркер нижняя альфа (a, b, c, d, e, и т.д.)Воспроизвести »
lower-greekМаркер нижняя греческаяВоспроизвести »
lower-latinМаркер нижняя латынь (a, b, c, d, e, и т.д.)Воспроизвести »
lower-romanМаркер нижняя римская (i, ii, iii, iv, v, и т.
д.)		Воспроизвести »
noneМаркер не отображаетсяВоспроизвести »
squareМаркер представляет собой квадратВоспроизвести »
upper-alphaМаркер верхняя альфа (A, B, C, D, E, и т.д.) Воспроизвести »
upper-greekМаркер верхняя греческая Воспроизвести »
upper-latinМаркер верхняя латынь (A, B, C, D, E, и т.д.)Воспроизвести »
upper-romanМаркер верхняя римская (I, II, III, IV, V, и т.д.)Воспроизвести »
initialУстанавливает это свойство в значение индекса. Прочитать о initialВоспроизвести »
inheritНаследует это свойство от родительского элемента. Прочитать о inherit

Примеры

Пример

Этот пример демонстрирует все разные элементы списка маркеров:

ul. a {list-style-type: circle;}
ul.b {list-style-type: disc;}
ul.c {list-style-type: square;}

ol.d {list-style-type: armenian;}
ol.e {list-style-type: cjk-ideographic;}
ol.f {list-style-type: decimal;}
ol.g {list-style-type: decimal-leading-zero;}
ol.h {list-style-type: georgian;}
ol.i {list-style-type: hebrew;}
ol.j {list-style-type: hiragana;}
ol.k {list-style-type: hiragana-iroha;}
ol.l {list-style-type: katakana;}
ol.m {list-style-type: katakana-iroha;}
ol.n {list-style-type: lower-alpha;}
ol.o {list-style-type: lower-greek;}
ol.p {list-style-type: lower-latin;}
ol.q {list-style-type: lower-roman;}
ol.r {list-style-type: upper-alpha;}
ol.s {list-style-type: upper-greek;}
ol.t {list-style-type: upper-latin;}
ol.u {list-style-type: upper-roman;}
ol.v {list-style-type: none;}
ol.w {list-style-type: inherit;}

Попробуйте сами »

Пример

Как добавить в пули цвет, для <ul> или <ol> удаление индекса пуль и добавления в объект HTML, которая выглядит как пули (&bull;):

ul {
    list-style: none; /* Удалить список пуль */
    padding: 0;
    margin: 0;
}

li {
    padding-left: 16px;
}

li:before {
    content: «•»; /* Вставить контент, который выглядит как пули */
    padding-right: 8px;
    color: blue; /* Или цвет вы предпочитаете */
}

Попробуйте сами »

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

CSS Учебник: CSS Список

CSS Справочник: Свойства list-style

HTML DOM Справочник: Свойства listStyleType

❮ Назад CSS Справочник Далее ❯

Руководство Основные CSS Selectors

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

1- Что такое CSS Selector?

CSS Selector используется для поиска (или выбора) элементов в HTML докумене, чтобы применить к ним стиль (style).

Простой пример:

/** Select all elements with class contains abc */
.abc  
/** Select element with ID = abc */
#abc

CSS Selectors разделен на 3 следующие виды:

Basic Selectors

Базовые Selector помогают вам выбрать элементы, основываясь на его Name, ID, Class или Attribute.

Базовые Selector будут упомянуты в данной статье.

Combining selectors

Выбрать элементы, основываясь на отношении между ними.

CombinatorSyntaxExample
Descendant combinatorA Bdiv span
div . item
Child combinatorA > Bul > li
General sibling combinatorA ~ Bp ~ span
Adjacent sibling combinatorA + Bh3 + p
Column combinatorA || Bcol || td
  • Руководство CSS combinator Selectors

Pseudo selectors

PseudoSyntaxExample
Pseudo classesA:Ba:visited
Pseudo elementsA::Bp::first-line
  • TODO Link?

2- Universal selector

Universal selector (Универсальный селектор): Выбирает все элементы или все элементы namespace (пространство имен).

Синтаксис:

SelectorОписание
*Выбрать все элементы.
*|*Выбрать все элементы.
ns|*Выбрать все элементы в пространстве имен ns.
|*Выбрать все элементы необъявленные в пространстве имен.

Например выбрать все элементы и настроить для них границы зеленого цвета.

universal-selector-example1.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>Universal Selector: *</title>
      <style>
         *  {
           border: 1px solid green;
           margin: 5px;
         }
      </style>
   </head>
   <body>
     <h2>I am h2 element</h2>
     <div>I am div element</div>
     <p>I am P element</div>
   </body>
</html>

3- CSS Type Selector

CSS Type Selector помогает вам найти элементы по имени.

Например, выбрать все элементы <div>:

div  {
   color: red;
}

Например, выбрать все элементы​​​​​​​ <span>:

type-selector-example1.css

span  {
   background-color: skyblue;
}

type-selector-example1.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>Universal Selector: ns|*</title>
      <link rel="stylesheet" type="text/css" href="type-selector-example1.css" />
   </head>
   <body>
     <span>I am span element</span>
     <p>I am P element</p>
     <span>I am span element</span>
   </body>
</html>

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

type-selector-example2.css

/** Select h2 or h3 */
h2, h3  {
   color: blue;
}

type-selector-example2. html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>Type Selector</title>
      <link rel="stylesheet" type="text/css" href="type-selector-example2.css" />
   </head>
   <body>
     <h2>I am h2 element</h2>
     <h3>I am h3 element</h3>
     <h4>I am h4 element</h4>
   </body>
</html>

4- CSS Class Selector

CSS Class Selector выбирает элементы, основываясь на значении атрибута (attribute) class.

Например, выбрать все элементы с class = «txt-green» ​​​​​​​или включая слово «txt-green».

class-selector-example1.css

.txt-green  {
   color: green;
}
.bg-yellow {
   background-color: yellow;
}

class-selector-example1.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>Class Selector</title>
      <link rel="stylesheet" type="text/css" href="class-selector-example1. css" />
   </head>
   <body>
     <h2 class ="txt-green">I am h2 with class = 'txt-green'</h2>
     <p>I am P element</p>
     <h3>I am h3 with class = 'txt-green bg-yellow'</h3>
   </body>
</html>

Пример:

class-selector-example2.css

/* <p> with class 'txt-green' or includes 'text-green' */
p.txt-green  {
   color: green;
}
.bg-yellow {
   background-color: yellow;
}
/* <div> with class inculudes both 'text-green' and 'bg-yellow' */
div.txt-green.bg-yellow  {
    color: green;
    font-style: italic;
}

class-selector-example2.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>Class Selector</title>
      <link rel="stylesheet" type="text/css" href="class-selector-example2.css" />
   </head>
   <body>
     <h2 class ="txt-green">I am h2 with class = 'txt-green'</h2>
     <p class ="txt-green">I am P element with</p>
     <div>I am DIV with class = 'txt-green bg-yellow'</div>
     <br/>
     <span>I am SPAN with class = 'txt-green bg-yellow'</span>
   </body>
</html>

5- CSS ID Selector

CSS ID Selector помогает вам выбрать элементы основываясь на значении атрибута (attribute) ID, значение атрибута ID должно полностью совпадать со значением, данным Selector. Примечание: CSS ID Selector «не различает прописные и строчные буквы» (Case insensitive)

id-selector-example.css

#demo  {
   color: blue;
   font-size: 30px;
}

id-selector-example.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>ID Selector</title>
      <link rel="stylesheet" type="text/css" href="id-selector-example.css" />
   </head>
   <body>
     <h2 id = "demo">Demo</h2>
     <span>I am span element</span>
     <p>I am P element</p>
   </body>
</html>

6- CSS Attribute Selector

CSS Attribute Selector помогает вам выбрать элементы, основываясь на атрибуте или значении выданного атрибута.

  • Руководство CSS Attribute Selector

CSS-псевдоклассы nth-child и nth-of-type | 8HOST.COM