Универсальный селектор css: Универсальный селектор * | CSS справочник – Универсальный селектор | CSS | WebReference

Leave a Comment / Css / By /

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

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

В CSS3 универсальный селектор применяется также в комбинации с пространством имён.

  • ns|* — все элементы в пространстве имён ns.
  • *|* — все элементы во всех пространствах имён.
  • |* — все элементы без явного указания пространства имён.

Синтаксис ?

* { Описание правил стиля }

Для обозначения универсального селектора применяется символ звёздочки (*). В некоторых случаях указывать универсальный селектор не обязательно. Так, например, записи *.class и .class являются идентичными по своему результату.

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
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>Универсальный селектор</title> 
  <style> 
   * { 
    margin: 0;
    padding: 0; /* Убираем отступы и поля для всех элементов */
   } 
  </style> 
 </head> 
 <body> 
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> 
 </body> 
</html>

Примечание

Браузер Internet Explorer до шестой версии включительно понимает конструкцию * html, что нелогично, поскольку тег <html> является тегом верхнего уровня и выше него никаких элементов быть не может. Эта ошибка иногда применяется, чтобы создать стиль для IE6, например конструкция * html body { … } будет добавлять стиль для селектора body в IE6 и ниже и не работает в других браузерах.

В браузере Internet Explorer 7 при добавлении универсального селектора перед именем селектора без пробелов, он воспринимается как контекстный селектор. Так, запись *body работает только в IE7 и игнорируется другими браузерами.

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

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

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

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

Браузеры

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

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

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

×

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

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

Последнее изменение: 30.08.2017

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

Курс по вёрстке сайта на CSS Grid

Универсальный селектор | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
5.0+8.0+1.0+3.5+1.0+1.0+1.0+1.0+

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

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

Синтаксис

* { Описание правил стиля }

Для обозначения универсального селектора применяется символ звездочки (*). В некоторых случаях указывать универсальный селектор не обязательно. Так, например, записи *.class и .class являются идентичными по своему результату.

Пример

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Универсальный селектор</title> 
  <style> 
   * { 
    margin: 0;
    padding: 0; /* Убираем отступы и поля для всех элементов */
   } 
  </style> 
 </head> 
 <body> 
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> 
 </body> 
</html>

Браузеры

Браузер Internet Explorer до шестой версии включительно понимает конструкцию * html, что нелогично, поскольку тег <html> является тегом верхнего уровня и выше него никаких элементов быть не может. Эта ошибка иногда применяется, чтобы создать стиль только для IE6, например конструкция * html body { … } будет добавлять стиль для селектора body только в IE6 и не работает в других браузерах.

В браузере Internet Explorer 7 при добавлении универсального селектора перед именем селектора без пробелов, он воспринимается как контекстный селектор. Так, запись *body работает только в IE7 и игнорируется другими браузерами.

seodon.ru | Учебник CSS — Универсальный селектор CSS

Опубликовано: 14.11.2010 Последняя правка: 08.12.2015

Универсальный селектор CSS, пожалуй, самый простой в понимании, так как он указывает, что стили будут применены абсолютно ко всем элементам без исключения. Универсальный селектор состоит всего из одного знака — звездочка (*), общий синтаксис следующий:

* { свойство: значение; свойство: значение; … }

Пример использования универсального селектора CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Универсальный селектор</title>
  <style type="text/css">
   * {
    margin:0; /* обнуляем внешние поля элементов */
    padding:0; /* обнуляем внутренние отступы */
    border:0; /* убираем рамки */
   }
  </style>
 </head>
 <body>
  <p>Параграф 1</p>
  <p>Параграф 2</p>
  <p>Параграф 3</p>
 </body>
</html>

Результат в браузере

Параграф 1

Параграф 2

Параграф 3

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

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

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

Домашнее задание.

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

  1. Измените стили тега <BLOCKQUOTE> таким образом, чтобы он стал похож на параграф. Какое свойство для этого нужно подумайте сами.
  2. Измените тег параграфа так, чтобы он наоборот стал похож на тег выделения длинных цитат.
  3. Превратите тег <SPAN> из элемента уровня строки (inline) в блочный элемент. Используйте для этого свойство display.
  4. Разместите указанные теги на странице и заполните их чем-нибудь, чтобы увидеть результат своих деяний.

p.s. Тут есть одна ловушечка, интересно поймаетесь вы на нее или нет?

Посмотреть результат → Посмотреть ответ

Универсальный селектор в CSS | Vaden Pro

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

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

Описание

Он обозначается в виде символа «*». С его помощью можно выделить сразу все теги на странице не делая поправок на их назначение и вложенность. Например:

С помощью этой записи мы задали всем элементам имеющим текст высоту шрифта в 18 пикселей.

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

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

*.left {
   border: 1px solid #000;
}
.left {
   border:  1px solid #000;
}

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

Где его можно применить?

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

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

Недостатки универсального селектора при сбрасывании стандартных стилей:

  • некоторые из стилей сбросить не может
  • для атрибута select не может обнулить отступ padding
  • может «убить» стандартный вид кнопки в большинстве браузеров
  • в браузере Mozila работает с небольшими багами
  • существенно замедляет погрузку страницы для Mozila (однако это касается сайтов с CSS имеющим более тысячи строк, в ином случае задержка незаметна.)

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

Оценок: 1 (средняя 5 из 5)

Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)

Уровень сложности:

Средний

Еще интересное

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

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

В CSS3 универсальный селектор применяется также в комбинации с пространством имён.

  • ns|* — все элементы в пространстве имён ns.
  • *|* — все элементы во всех пространствах имён.
  • |* — все элементы без явного указания пространства имён.

Синтаксис ?

* { Описание правил стиля }

Для обозначения универсального селектора применяется символ звёздочки (*). В некоторых случаях указывать универсальный селектор не обязательно. Так, например, записи *.class и .class являются идентичными по своему результату.

✖

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
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>Универсальный селектор</title>
  <style>
   * {
    margin: 0;
    padding: 0; /* Убираем отступы и поля для всех элементов */
   }
  </style>
 </head>
 <body>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
 </body>
</html>

Примечание

Браузер Internet Explorer до шестой версии включительно понимает конструкцию * html, что нелогично, поскольку тег <html> является тегом верхнего уровня и выше него никаких элементов быть не может. Эта ошибка иногда применяется, чтобы создать стиль для IE6, например конструкция * html body { … } будет добавлять стиль для селектора body в IE6 и ниже и не работает в других браузерах.

В браузере Internet Explorer 7 при добавлении универсального селектора перед именем селектора без пробелов, он воспринимается как контекстный селектор. Так, запись *body работает только в IE7 и игнорируется другими браузерами.

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

✖

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

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

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

Браузеры: Настольные Мобильные     ?

Internet ExplorerChromeOperaSafariFirefox
4181.11
AndroidFirefox MobileOpera MobileSafari Mobile
1181.3
✖

Браузеры

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

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

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

Универсальный селектор — Xiper.net

Автор: Александр Головко Дата публикации: 18.01.2011

Предыдущая статья Селекторы: общие сведения

Описание селектора:

  • Выполняемая задача — выбор всех элементов. Вообще всех.
  • Обозначение — символ «звездочка» — *.
  • Пример использования:

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


* {
	padding: 0;
	margin: 0;
}

Подробнее про универсальный селектор

Появился в CSS с версии 2. Соответствует любому элементу в дереве документа. Поэтому стили, указанные для универсального селектора применяются ко всем элементам сразу. По этой причине, советую применять его очень осторожно — при наследовании стилей могут быть неприятности. Или, скорее, малопредсказуемое (для неопытного кодера) поведение. Подробнее этот момент рассмотрим в разделе, посвященном наследованию.

Еще одна особенность универсального селектора — когда он используется в сочетании с другим селектором (например, селектором класса, идентификатора или атрибута) в составе простого селектора, то может быть безнаказанно пропущен. Это примерно то же самое, что вместо «Все дромадеры — это одногорбые верблюды» сказать просто «дромадеры — это одногорбые верблюды». Смысл не поменялся.

Пример:


*.error {
	color: red;
}
.error {
	color: red;
}
/* эти два правила эквивалентны. Универсальный селектор во втором случае пропущен */

Область применения

Собственно, удобнее всего применять универсальный селектор, как в первом примере — для сброса зависящих от браузера начальных значений стилей (в частности, отступов).

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

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

По теме:

Универсальный селектор CSS — Как создать сайт

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

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

Схема CSS-кода выглядит следующим образом:


селектор {
 CSS-свойство: значение;
 CSS-свойство: значение;
 ... и т.д.
}

В универсальном селекторе, в качестве селектора, выступает знак звёздочки *:


* {
 CSS-свойство: значение;
 CSS-свойство: значение;
 ... и т.д.
}

Универсальный селектор, влияет сразу на все теги HTML-документа.

Например, можно убрать все внутренние и внешние отступы у всех тегов HTML-документа:


* {
 margin: 0;
 padding: 0;
}

Допустим, у нас есть HTML-документ содержащий следующий код:


<!DOCTYPE html>
<html>
 <head>
  <title>Страница о снежном барсе</title>
 </head>
 <body>
  <h2>Снежный барс</h2>
  <p>
   Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства 
   кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии, 
   Казахстана, Кыргызстана, Китая, Монголии, Непала, Пакистана, России, 
   Таджикистана и Узбекистана. Ирбис отличается тонким, длинным, гибким телом, 
   относительно короткими лапами, небольшой головой и очень длинным хвостом. 
   Длина снежного барса вместе с хвостом составляет 200-230 см, вес до 55 кг.
   Окраска меха светлая, дымчато-серая с кольцеобразными или сплошными тёмными 
   пятнами.</p>
  <p>
   Охотится снежный барс, в основном, на горных козлов и баранов, также в его 
   рационе встречаются кабаны, фазаны и даже суслики. В силу труднодоступности
   местообитания вида, ирбисы до сих пор остаются малоизученными. Однако по 
   приблизительным оценкам их количество варьируется в районе около 10 тысяч 
   особей. По состоянию на 2013 год, охота на снежных барсов повсеместно
   запрещена.</p>
 </body>
</html>

Страница в браузере будет выглядеть следующим образом.

Давайте с помощью универсального селектора, сделаем цвет шрифта у всех тегов зелёным green, имя шрифта arial, стиль шрифта oblique (наклонный).


<!DOCTYPE html>
<html>
 <head>
  <title>Страница о снежном барсе</title>
  <style>
   * { 
    color: green;
    font-family: arial;
    font-style: oblique; 
   }
  </style>
 </head>
 <body>
  <h2>Снежный барс</h2>
  <p>
   Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства 
   кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии, 
   Казахстана, Кыргызстана, Китая, Монголии, Непала, Пакистана, России, 
   Таджикистана и Узбекистана. Ирбис отличается тонким, длинным, гибким телом, 
   относительно короткими лапами, небольшой головой и очень длинным хвостом. 
   Длина снежного барса вместе с хвостом составляет 200-230 см, вес до 55 кг.
   Окраска меха светлая, дымчато-серая с кольцеобразными или сплошными тёмными 
   пятнами.</p>
  <p>
   Охотится снежный барс, в основном, на горных козлов и баранов, также в его 
   рационе встречаются кабаны, фазаны и даже суслики. В силу труднодоступности
   местообитания вида, ирбисы до сих пор остаются малоизученными. Однако по 
   приблизительным оценкам их количество варьируется в районе около 10 тысяч 
   особей. По состоянию на 2013 год, охота на снежных барсов повсеместно
   запрещена.</p>
 </body>
</html>

Страница в браузере будет выглядеть следующим образом.

Также можете поэкспериментировать с внешним отступом, сделайте его сначала 0, а затем 15px, добавьте в CSS-код:


margin: 0;

А потом:


margin: 15px;

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

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

Читать далее: Шпаргалка CSS

Скоро допишу статьи о других селекторах и их взаимоотношениях.


Дата публикации поста: 5 февраля 2016

Дата обновления поста: 16 октября 2014


Навигация по записям

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

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