Что в css значит
Перейти к содержимому

Что в css значит

  • автор:

Что делает знак тильда(~) в css?

Селектор для img , перед которым (в том же родителе) есть button , над которым находится мышь.

button:hover ~ img
AAAABCD

Отслеживать
ответ дан 23 мар 2020 в 18:43
user176262 user176262

http://htmlbook.ru/css/selector/sibling это называется родственные селекторы. Стиль будет применен к картинке которая находится на одном уровне с button и идет после него.

Отслеживать
ответ дан 23 мар 2020 в 18:50
930 7 7 серебряных знаков 26 26 бронзовых знаков
насчёт «сразу после него» — это вы тут промахнулись)
23 мар 2020 в 18:54
@meine да, видимо прочитал так.
23 мар 2020 в 18:56

    Важное на Мете
Похожие

Подписаться на ленту

Лента вопроса

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

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.2.16.5008

Что в CSS означает знак «>»?

Rsa97

div > p – только непосредственные потомки
div + p – первый правый сосед: p на том же уровне вложенности, который идёт сразу после div (если есть).
https://learn.javascript.ru/css-selectors#otnosheniya

Rsa97

RAX7, Да, я уже поправил.

Что такое CSS: объясняем простыми словами

Встречая аббревиатуру CSS впервые, новички уже догадываются, что это как-то связано с сайтами. Разберёмся: CSS — Cascading Style Sheets — это каскадные таблицы стилей. По сути — язык, который отвечает за описание внешнего вида HTML-документа. Подавляющее большинство современных веб-сайтов работают на основе связки HTML+CSS.

Теперь ответим на вопрос о том, что делает CSS. Всё просто: если HTML структурирует контент на странице, то CSS позволяет отформатировать его, сделать более привлекательным для читателя. Изначально веб-разработчики использовали исключительно HTML — так было на заре развития интернет-технологий. С помощью разметки можно было выделить параграф, заголовок, изменить начертание текста. А большего и не требовалось.

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

CSS и стили

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

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

Узнай, какие ИТ — профессии
входят в ТОП-30 с доходом
от 210 000 ₽/мес
Павел Симонов
Исполнительный директор Geekbrains

Команда GeekBrains совместно с международными специалистами по развитию карьеры подготовили материалы, которые помогут вам начать путь к профессии мечты.

Подборка содержит только самые востребованные и высокооплачиваемые специальности и направления в IT-сфере. 86% наших учеников с помощью данных материалов определились с карьерной целью на ближайшее будущее!

Скачивайте и используйте уже сегодня:

Павел Симонов - исполнительный директор Geekbrains

Павел Симонов
Исполнительный директор Geekbrains

Топ-30 самых востребованных и высокооплачиваемых профессий 2023

Поможет разобраться в актуальной ситуации на рынке труда

Подборка 50+ бесплатных нейросетей для упрощения работы и увеличения заработка

Только проверенные нейросети с доступом из России и свободным использованием

ТОП-100 площадок для поиска работы от GeekBrains

Список проверенных ресурсов реальных вакансий с доходом от 210 000 ₽

Получить подборку бесплатно
Уже скачали 26494

Стили можно разметить внутри тега или использовать отдельный CSS-файл.

Вот так можно прописать CSS в качестве атрибута непосредственно в HTML:

А так CSS прописывается при помощи тега и в теге документа HTML.

Теперь разберёмся, что такое CSS-файл. Всё просто — это файл с расширением .css, где прописываются правила оформления документа. Чтобы привязать файл к оформлению страницы, нужно использовать тег :

Современный способ оформления веб-документов вошёл в практику в 2011 году. Это свойство CSS grid — теперь оно поддерживается практически всеми браузерами.

Что в css значит

Reg.ru: домены и хостинг

Крупнейший регистратор и хостинг-провайдер в России.

Более 2 миллионов доменных имен на обслуживании.

Продвижение, почта для домена, решения для бизнеса.

Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

Бесплатный Курс «Практика HTML5 и CSS3»

Освойте бесплатно пошаговый видеокурс

по основам адаптивной верстки

на HTML5 и CSS3 с полного нуля.

Фреймворк Bootstrap: быстрая адаптивная вёрстка

Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.

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

Верстайте на заказ и получайте деньги.

Бесплатный тренинг «PHP для Создания Сайтов: Введение»

Что нужно знать для создания PHP-сайтов?

Ответ здесь. Только самое важное и полезное для начинающего веб-разработчика.

Узнайте, как создавать качественные сайты на PHP всего за 2 часа и 27 минут!

—> Бесплатный курс «Сайт-Визитка За 15 уроков»

Создайте свой сайт за 3 часа и 30 минут.

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

Вам останется лишь наполнить его нужной информацией и изменить дизайн (по желанию).

—> Бесплатный курс «Основы HTML и CSS»

Изучите основы HTML и CSS менее чем за 4 часа.

После просмотра данного видеокурса Вы перестанете с ужасом смотреть на HTML-код и будете понимать, как он работает.

Вы сможете создать свои первые HTML-страницы и придать им нужный вид с помощью CSS.

Бесплатный курс «Сайт на WordPress»

Хотите освоить CMS WordPress?

Получите уроки по дизайну и верстке сайта на WordPress.

Научитесь работать с темами и нарезать макет.

Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!

Бесплатный курс «Основы работы с JavaScript»

Хотите изучить JavaScript, но не знаете, как подступиться?

После прохождения видеокурса Вы освоите базовые моменты работы с JavaScript.

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

*Наведите курсор мыши для приостановки прокрутки.

30 CSS-селекторов, о которых полезно помнить

Итак, Вы разобрались с основными селекторами: id, class, селекторами потомков. И все? Если да, то Вы теряете очень много в плане гибкости управления внешним видом элементов на странице.

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

1. *

Начнем с простейших вещей для новичков, прежде чем перейдем к продвинутым селекторам.

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

Также символ * можно использовать для дочерних элементов объекта.

#container *

Этот код нацелен на все элементы, которые являются дочерними по отношению к блоку с идентификатором container.

Совместимость:

* IE6+
* Firefox
* Chrome
* Safari
* Opera

2. #X

#container

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

«Спросите себя: Мне точно необходимо использовать id для какого-то элемента, чтобы сослаться на него?»

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

Совместимость:

* IE6+
* Firefox
* Chrome
* Safari
* Opera

3. .X

.error

Это селектор класса. Разница между id и классами в том, что с помощью классов можно выбирать сразу несколько элементов. Используйте классы, если Вам нужно применить один стиль к группе элементов.

В противном случае используйте id для нахождения «иголки в стоге сена» и применения стиля только к одному конкретному объекту.

Совместимость:

* IE6+
* Firefox
* Chrome
* Safari
* Opera

4. X Y

li a

Следующий часто используемый тип селектора — селектор потомка. Его следует использовать, когда нужно производить более точечный отбор элементов.

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

«Совет: Если Ваш селектор похож на X Y Z A B.error, то Вы, вероятно, что-то делаете на так. Всегда спрашивайте себя, действительно ли это самый простой способ»

Совместимость:

* IE6+
* Firefox
* Chrome
* Safari
* Opera

5. X

a ul

Что, если Вы хотите сослать на все элементы определенного типа на странице, если у них нет id или классов? Делайте проще, используйте селекторы типа. Если Вам нужно выбрать все неупорядоченные списки, используйте ul<>.

Совместимость:

* IE6+
* Firefox
* Chrome
* Safari
* Opera

6. X:visited и X:link

a:link a:visited

Здесь мы используем псевдо-класс :link для выбора всех ссылок, на которых еще не был совершен клик.

Также есть псевдо-класс :visited, который, как Вы и ожидали, позволяет нам применить стиль только к тем ссылкам, по которым был совершен клик или переход.

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

7. X + Y

ul + p

Это так называемый смежный селектор. В этом случае каждый параграф следующий сразу после каждого элемента ul будет красного цвета.

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

8. X > Y

#container > ul

Различие между X Y и X > Y в том, что последний выберет только прямых потомков. Рассмотрим следующий пример:

  • Элемент списка
    • Потомок

    Селектор #container > ul выберет только те элементы ul, которые являются прямыми потомками блока div с идентификатором container. Т.е. в данном случае этот селектор не отберет элемент ul, который является потомком первого элемента li.

    Совместимость:

    * IE7+
    * Firefox
    * Chrome
    * Safari
    * Opera

    9. X ~ Y

    ul ~ p

    Эта комбинация сестринских (сиблинговых) элементов похожа на X + Y, но она менее строгая. Если в случае ul + p будут выбраны только первые элементы p, следующие за ul (т.е. наблюдается смежность в выборе), то рассматриваемый нами сейчас селектор более общий.

    В нашем случае он отберет все элементы p, следующие за элементом ul.

    Совместимость:

    * IE7+
    * Firefox
    * Chrome
    * Safari
    * Opera

    10. X[title]

    a[title]

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

    Совместимость:

    * IE7+
    * Firefox
    * Chrome
    * Safari
    * Opera

    11. X[href=»foo»]

    a[href=»http://www.codeharmony.ru»]

    Код выше позволит придать стиль всем ссылкам, атрибут href у которых равен http://www.codeharmony.ru. Эти ссылки будут красного цвета. Остальные ссылки не получат данного стиля.

    Это работает хорошо, но это немного негибко. Что, если ссылка на самом деле ведет на Codeharmony.ru но, возможно, адрес указан, как codeharmony.ru а не http://www.codeharmony.ru? В таких случаях мы можем использовать основы регулярных выражений.

    Совместимость:

    * IE7+
    * Firefox
    * Chrome
    * Safari
    * Opera

    12. X[href*=»codeharmony»]

    a[href*=»codeharmony»]

    Поехали дальше; это как раз то, что нам нужно. Звездочка означает, что искомое значение может находиться в любой части атрибута href. Таким образом, мы можем отобрать и http://www.codeharmony.ru и www.codeharmony.ru и codeharmony.ru.

    Совместимость:

    * IE7+
    * Firefox
    * Chrome
    * Safari
    * Opera

    13. X[href^=»http»]

    a[href^="http"] < background: url(path/to/external/icon.png) no-repeat; padding-left: 10px; >

    Вы когда-нибудь думали о том, как на некоторых сайтах рядом с ссылками, ведущими на другие сайты (внешние по отношению к текущему) проставлены небольшие иконки, которые дают знать об этом пользователю? Это отличные «напоминалки» пользователю о том, что ссылка ведет на другой сайт.

    Делается это с помощью символа ^ (карат). Он обычно используется в регулярных выражениях для обозначения начала строки. Если мы хотим отобрать ссылки, у которых атрибут href начинается с http, то мы можем использовать селектор из примера выше.

    «Обратите внимание, что мы не ищем http://. Это необязательно и, к тому же, не учитывает ссылки по протоколу https://.»

    Совместимость:

    * IE7+
    * Firefox
    * Chrome
    * Safari
    * Opera

    14. X[href$=».jpg»]

    a[href$=».jpg»]

    И снова мы используем регулярное выражение и символ $ для того, чтобы обозначить конец строки. В данном примере мы ищем все ссылки, которые ссылаются на картинки с расширением .jpg. Разумеется, такой подход не будет работать для картинок с расширениями .gif, .png и т.д.

    Совместимость:

    * IE7+
    * Firefox
    * Chrome
    * Safari
    * Opera

    15. X[data-*=»foo»]

    a[data-filetype=»image»]

    Как же мы можем охватить различные типы картинок? Мы можем создать, например, несколько селекторов:

    a[href$=».jpg»], a[href$=».jpeg»], a[href$=».png»], a[href$=».gif»]

    Но это муторно и не элегантно. Другой вариант — это создать собственный атрибут data-filetype и добавить его к каждой ссылке, ведущей на картинку.

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

    a[data-filetype=»image»]

    Совместимость:

    * IE7+
    * Firefox
    * Chrome
    * Safari
    * Opera

    16. X[foo~=»bar»]

    a[data-info~=»external»] < color: red; >a[data-info~=»image»]

    Вот еще один интересный трюк, о котором не все знают. Знак ~ (тильда) позволяет нам выбирать атрибуты со значениями, разделенными пробелами, т.е.

    Используя данный прием мы можем делать выборки с нужными нам комбинациями:

    /* Отобрать атрибут data-info, который содержит значение external */ a[data-info~=»external»] < color: red; >/* и отобрать атрибут data-info, который содержит значение image */ a[data-info~=»image»]

    Совместимость:

    * IE7+
    * Firefox
    * Chrome
    * Safari
    * Opera

    17. X:checked

    input[type=radio]:checked

    Этот псевдо-класс отбирает те элементы, которые были отмечены, например, радиокнопку или чекбокс.

    Совместимость:

    * IE9+
    * Firefox
    * Chrome
    * Safari
    * Opera

    18. X:after

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

    .clearfix:after < content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; >.clearfix

    Данный пример показывает, как с помощью псевдо-класса :after после блока с классом .clearfix создаётся пустая строка, после чего очищается. Хороший метод, когда невозможно применить overflow: hidden.

    Совместимость:

    * IE8+
    * Firefox
    * Chrome
    * Safari
    * Opera

    19. X:hover

    div:hover

    Это Вы точно знаете. Официальное название звучит вроде «псевдо-класс, основанный на действии пользователя». Звучит страшновато, хотя на деле все просто. Хотите применить к элементу определенный стиль, когда на него наводится курсор мыши? Это оно самое!

    «Помните, что старые версии IE не понимают этого псевдо-класса по отношению к чему-бы то ни было, кроме тэга а.»

    Часто данный прием используется для задания нижней границы для ссылок при наведении на них курсора:

    a:hover

    «Мега-чит: border-bottom: 1px solid black; выглядит лучше, чем text-decoration: underline;»

    Совместимость:

    * IE6+ (в IE6 работает только по отношению к ссылкам)
    * Firefox
    * Chrome
    * Safari
    * Opera

    20. X:not(selector)

    div:not(#container)

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

    Если же мне нужно выбрать все элементы, кроме тэгов параграфов, то можно написать так:

    *:not(p)

    Совместимость:

    * IE9+
    * Firefox
    * Chrome
    * Safari
    * Opera

    21. X::pseudoElement

    p::first-line

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

    Выбираем первую букву параграфа:

    p::first-letter

    Этот кусок кода найдет все параграфы на странице и применит к первой букве каждого из них указанные стили. Часто это используется для создания эффекта «газетного заголовка».

    Выбираем первую строку параграфа:

    p::first-line

    Аналогично предыдущему примеру, но в данном случае будет выбрана первая строка каждого параграфа.

    Совместимость:

    * IE6+
    * Firefox
    * Chrome
    * Safari
    * Opera

    22. X:nth-child(n)

    li:nth-child(3)

    Помните времена, когда мы не имели возможности обратиться к конкретному порядковому элементу-потомку? Данный псевдо-класс решает эту проблему!

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

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

    Совместимость:

    * IE9+
    * Firefox
    * Chrome
    * Safari

    23. X:nth-last-child(n)

    li:nth-last-child(2)

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

    Совместимость:

    * IE9+
    * Firefox 3.5+
    * Chrome
    * Safari
    * Opera

    24. X:nth-of-type(n)

    ul:nth-of-type(3)

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

    Представьте, что на странице есть пять неупорядоченных списков. Если Вам нужно применить стили только к третьему списку, но у него нет уникального идентификатора и иных «зацепок», то можно воспользоваться псевдо-классом nth-of-type(n). В коде выше показан способ придания стиля только третьему неупорядоченному списку.

    Совместимость:

    * IE9+
    * Firefox 3.5+
    * Chrome
    * Safari

    25. X:nth-last-of-type(n)

    ul:nth-last-of-type(3)

    Да, для полноты картины есть и такой вариант. Так можно выбрать n-ный элемент определенного типа с конца.

    Совместимость:

    * IE9+
    * Firefox 3.5+
    * Chrome
    * Safari
    * Opera

    26. X:first-child

    ul li:first-child

    Этот псевдо-класс позволяет выбрать только первого потомка родительского элемента. Часто используется для удаления границ первого и последнего элементов списка.

    К примеру, если у вас есть список рядов, каждый из которых имеет border-top и border-bottom, то последний и первый элементы списка будут немного выбиваться из общего строя.

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

    Совместимость:

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

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