Как исключить класс в css

Исключить дочерний элемент в css

Используйте селекторы «:not» и «*». Для вашего примера:

figure *:not(img)

Селектор «*» выбирает все дочерние элементы. Селектор «:not» убирает из этой выборки img.

Отслеживать
ответ дан 29 мар 2018 в 12:38
1,567 6 6 серебряных знаков 8 8 бронзовых знаков
таким образом применяется ко всем figure, у которых нет img.
29 мар 2018 в 12:42
Вы правы. Исправил ответ
29 мар 2018 в 12:52

    p < color: #000000; >:not(p) 
This is a heading
 
This is a paragraph.
 
This is another paragraph.
 
This is some text in a div element.
 Link to W3Schools!   

Отслеживать
ответ дан 21 мар 2021 в 19:17
21 мар 2021 в 19:18

Важное на Мете

Похожие

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

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

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

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

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как исключить класс в css

Отрицательный CSS псевдокласс (en-US) , :not(X) — функция, принимающая простой селектор X в качестве аргумента. Он находит элементы, не соответствующие селектору. X не должен содержать других отрицательных селекторов.

Примечание:

Синтаксис

:not(selector)

Пример

p:not(.classy)  color: red; > body :not(p)  color: green; > 

CSS выше и HTML ниже.

p>Некоторый текст.p> p class="classy">Какой-то другой текст.p> span>Ещё текстspan> 

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

Specification
Selectors Level 4 # negation

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

BCD tables only load in the browser

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 7 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

• Product help
• Report an issue

Our communities

Developers

• Web Technologies
• Learn Web Development
• MDN Plus
• Hacks Blog

• Website Privacy Notice
• Cookies
• Legal
• Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Как исключить класс в css

Псевдокласс :not задаёт правила стилей для элементов, которые не содержат указанный селектор.

Синтаксис

В качестве селектора могут указываться псевдоклассы, теги, идентификаторы, классы и селекторы атрибутов. Нельзя использовать псевдокласс :not (конструкция :not(:not(. )) запрещена) и псевдоэлементы.

Значения

HTML5 CSS3 IE Cr Op Sa Fx

В данном примере стиль применяется ко всем тегам за исключением тега, в параметрах которого установлено type=»submit» (кнопка «Отправить»). Результат примера показан на рис. 1.

How to exclude particular class name in CSS selector?

I’m trying to apply background-color when a user mouse hover the element whose class name is «reMode_hover» .

But I do not want to change color if the element also has «reMode_selected»

Note: I can only use CSS not javascript because I’m working within some sort of limited environment.

To clarify, my goal is to color the first element on hover but not the second element.

HTML

I tried below hoping the first definition would work but it is not. What am I doing wrong?

CSS

3 Answers 3

One way is to use the multiple class selector (no space as that is the descendant selector):

In modern browsers you can do:

Consult http://caniuse.com/css-sel3 for compatibility information.

Method 1

The problem with your code is that you are selecting the .remode_hover that is a descendant of .remode_selected . So the first part of getting your code to work correctly is by removing that space

Then, in order to get the style to not work, you have to override the style set by the :hover . In other words, you need to counter the background-color property. So the final code will be

Method 2

An alternative method would be to use :not() , as stated by others. This will return any element that doesn’t have the class or property stated inside the parenthesis. In this case, you would put .remode_selected in there. This will target all elements that don’t have a class of .remode_selected

However, I would not recommend this method, because of the fact that it was introduced in CSS3, so browser support is not ideal.

Method 3

A third method would be to use jQuery. You can target the .not() selector, which would be similar to using :not() in CSS, but with much better browser support

CSS-селектор :not. Полезные примеры

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

Ну окей, думаю я, в моей практике не встречались такие ситуации. Обходились мы ведь как-то раньше без :not . Приходилось немного переписать структуру селекторов или обнулить пару значений.

Пример 1. Элемент без класса

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

Например, мы хотим на сайте сделать красивые буллиты для ненумерованных списков ul li . Мы пишем код:

В результате, наши красивые буллиты появляются не только в контенте, но и, например, в навигации, где тоже используются ul li .

Мы ограничиваем область действия селектора:

Навигацию мы спасли, но ненужные буллиты всё еще вылазят на слайдерах, списках новостей и других конструкциях внутри .content , где тоже используются ul li .

Далее у нас варианты:

1) обнулить мешающие стили в слайдерах и других местах. Но это противоречит «DRY » и является одним из признаков «вонючего» кода. К тому же не решает проблему раз и навсегда: добавите, например, аккордеон и списки в нем снова придется обнулять.

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

Это добавляет лишней работы по расстановке классов в контенте. Иногда имеет смысл, но лишнюю работу никто не любит.

3) стилизовать только те ul li , у которых нет никаких классов вообще:

Победа! Нам не нужно делать дополнительную работу по расстановке классов в контенте. А на слайдерах, аккордеонах и прочих конструкциях, которые не должны выглядеть как списки, но используют их в своей разметке, в 99% случаев уже будут свои классы, и наши стили их не затронут.

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

Пример 2. Изменение внешнего вида всех элементов, кроме наведенного

Такой эффект можно реализовать без :not путем перезаписи значений. И это будет работать в бо́льшем количестве браузеров.

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

Пример 3. Меню с разделителями между элементами

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

Через перезапись свойств. Но тут два правила вместо одного, что не есть «DRY ».

Через :nth-last-child() . Одно правило, но тяжело читается.

Через :not() — самая короткая и понятная запись.

Пример 4. Debug css

Удобно для отладки и самоконтроля искать/подсвечивать картинки без alt, label без for и другие ошибки.

Пример 5. Поля форм

Раньше текстовых полей форм было не много. Достаточно было написать:

С появлением новых типов полей в HTML5 этот список увеличился:

Вместо перечисления 14 типов инпутов можно исключить 8 из них:

Ладно, этот пример не очень красив, и я рекомендую всё же первый вариант с перечислением, он работает с IE8+, а второй вариант с IE9+.

Поддержка

Следует заметить, что согласно спецификации в скобках селектора :not() может стоять только простой селектор и в скобках нельзя использовать сам селектор :not() . Если нужно исключить несколько элементов, :not() можно повторить несолько раз, как в примере 5.

Если очень нужны CSS3-селекторы в браузерах, которые их не поддерживают, можно использовать полифил selectivizr.

Псевдоклассы СSS :not() и :target

Сегодня мы рассмотрим менее распространенные псевдоклассы CSS , которые поддерживаются в современных браузерах: child-indexed и typed child-indexed , а также псевдоклассы для элементов ввода input . Псевдоклассы child-indexed и typed child-indexed позволяют выделять элементы по их расположению в дереве документа. Псевдоклассы input определяют поля формы на основе их значений и состояний.

Подсветка фрагментов страницы псевдоклассом :target

В этом случае идентификатор фрагмента является частью URL , который следует после хеша # ( например, #top или #footnote1 ). Такое часто используется для организации навигации по странице при помощи так называемой « jump-link ». С помощью псевдокласса :target можно подсветить фрагмент документа:

После нескольких штрихов и работы с CSS получается результат, который приведен ниже:

Каждый comment в коде обозначен идентификатором, который позволяет ссылаться на конкретный фрагмент. Например, . Всё что остаётся – это стилизовать комментарий, используя псевдокласс CSS child :target :

Когда идентификатор фрагмента в URL совпадает с комментарием ( например , http://example.com/post/#comment-1146937891 ), он будет подсвечен жёлтым цветом, как показано ниже:

Псевдокласс CSS :target позволяет создавать комбинации, что открывает пространство для манёвров и позволяет не использовать JavaScript . Стилизуем наш пример с помощью CSS3 . Для начала посмотрите на HTML-код :

Здесь всё просто: три вкладки и контент с привязкой. Добавим CSS :

Здесь и начинается волшебство. Сначала мы задаём вкладкам абсолютное позиционирование. Затем располагаем первую вкладку поверх контента при помощи свойства z-index: 1 . Это важно, если при первом посещении пользователи должны видеть именно эту вкладку. Добавляем свойство z-index 1 к нашей вкладке target . Это гарантирует, что выделенный слой всегда будет расположен поверх остального контента. Результат представлен ниже:

Улучшаем доступность

В более доступной версии ( в том числе и псевдоклассах CSS ссылок ) можно использовать JavaScript для переключения атрибутов hidden и aria-hidden=true .

Клик по вкладке обновляет URL с использованием нового идентификатора фрагмента, после чего приводится в действие состояние :target .

Отрицание селекторов при помощи :not()

Одним из самых многофункциональных считается псевдокласс :not() . Он возвращает все элементы, за исключением тех, которые совпадают с аргументом селектора. Например, p:not(.message) выделяет все элементы p без класса message .

Псевдокласс :not() принимает один аргумент, как и большинство функций в других языках программирования. Любой аргумент, заданный в :not() , должен быть простым селектором, названием класса или ID , другим псевдоклассом. Псевдоклассы не работают так, как составные селекторы типа label.checkbox или сложные селекторы типа p img .

Посмотрите на пример формы, в которой используется текстовые элементы ввода и radio buttons :

В HTML label , ассоциированные с элементами типа radio , имеют класс .label-radio . Можно использовать псевдокласс CSS нажатия :not() для выделения элементов, не имеющих класса label-radio , как это показано на картинке ниже:

Рассмотрим более сложный пример. Используем стилизацию текстовых полей. Сюда входят элементы ввода number , email и text , а также password и url . Кроме этого мы исключим элементы radio , checkbox и range . Вам наверняка захочется воспользоваться следующим списком селектора:

К сожалению, это не поможет, так как каждый новый селектор переписывает предыдущий. Это всё равно, что писать:

Вместо этого, нужно связать псевдоклассы :not() в цепочку, чтобы они отфильтровывали все элементы input :

Приведённая цепочка селекторов также соответствует элементам [type=image], [type=reset], [type=color] и [type=submit]

Использование псевдоклассов и псевдоэлементов CSS без простого селектора эквивалентно его использованию с универсальным селектором. Другими словами, :not([type=radio]) – то же, что и *:not([type=radio]) . В данном случае нашему критерию отвечает любой элемент без атрибута type и значения radio , включая html и body . Чтобы предотвратить это, используйте :not() с названием класса, ID или селектор атрибутов в качестве селектора.

В CSS Class-селекторах Level 4 изменен принцип работы :not() , так что, теперь он принимает в качестве аргумента не только простые селекторы, но и списки. Вместо того чтобы связывать классы, как это делалось раньше, можно указывать аргументы через запятую:

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

Пожалуйста, оставьте ваши комментарии по текущей теме статьи. Мы очень благодарим вас за ваши комментарии, отклики, лайки, дизлайки, подписки!

Похожие публикации:

1. Как сделать блоки в css
2. Как сделать вертикальный градиент css
3. Как сделать выравнивание в css
4. Как сделать границу в css

Как сделать исключение в css

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

В CSS (Cascading Style Sheets) существует множество свойств и правил, которые определяют внешний вид веб-страницы. Однако, иногда может возникнуть необходимость отступить от установленных правил и добавить исключение.

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

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

Как сделать исключение в CSS

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

Первый способ — использование псевдокласса :not(). Данный псевдокласс позволяет исключить элементы, которые не соответствуют заданному селектору. Например, чтобы исключить все элементы с классом «red», нужно написать:

Читать далее«title»: Что делать после шпаклевки стен: этапы и рекомендации.

color: blue;

Таким образом, все div элементы, у которых нет класса «red», будут окрашены в синий цвет.

Второй способ — использование более конкретных селекторов. Например, если нужно изменить цвет ссылок только внутри списка, можно указать:

color: green;

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

Читать далее«Арбуз кримсон руби F1: отзывы, сроки и правила посадки».

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

color: blue;

color: red !important;

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

Что такое исключение в CSS

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

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

Чтобы создать исключение, необходимо использовать комбинацию селекторов. Например, можно создать исключение, используя селекторы класса и потомка: .header a <> — это будет применять стиль только к ссылкам, которые находятся внутри элемента с классом «header».

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

Также, использование исключений позволяет заботиться о соблюдении принципа DRY (Do not Repeat Yourself) и избежать дублирования кода. Вместо того, чтобы создавать отдельные правила для каждого элемента, мы можем использовать исключение, чтобы применить один стиль на разные элементы.

Почему нужно делать исключения в CSS

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

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

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

Примеры исключений в CSS

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

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

Еще один способ создания исключений — это использование селектора :last-child, который выбирает последний дочерний элемент. Например, если нужно стилизовать все элементы

кроме последнего, можно использовать следующий код:ul li:not(:last-child) Иногда может потребоваться исключить определенный класс элементов, например, чтобы стилизовать все элементы , кроме тех, у которых есть класс «exclude». Для этого можно использовать селектор :not() в сочетании с селектором класса. Например: div:not(.exclude) Наконец, можно использовать селектор атрибута [attribute!=value], чтобы выбрать все элементы, у которых значение атрибута не соответствует заданному значению. Например, если нужно стилизовать все ссылки, кроме тех, у которых атрибут «href» равен «https://example.com», можно использовать следующий код: a[href!=»https://example.com»] Видно, что в CSS достаточно просто сделать исключение, используя соответствующие селекторы и спецификации.

Как сделать исключение для одного элемента

• h1.my-title
• /* стили для my-title */
• >

Айди задается с помощью решетки перед названием айди. Например, если мы хотим сделать исключение для заголовка h1 с айди «my-heading», мы задаем стиль так:

• h1#my-heading
• /* стили для my-heading */
• >

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

Как сделать исключение для нескольких элементов

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

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

В этом примере мы использовали псевдокласс :not(), чтобы исключить элементы с использованием комбинатора :nth-of-type(). Мы выбрали первый и второй элементы параграфа и исключили их из стиля.

Таким же образом мы можем применить исключение для нескольких элементов, перечислив их через запятую. Например, если нам нужно применить стиль к списку, но исключить первый элемент списка и все элементы с классом «exclude», мы можем использовать следующий код:

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

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

Создание класса исключения

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

Для создания класса исключения нужно добавить классу элемента имя класса с символом отрицания «!» вначале. Например, если класс элемента называется «class1», а исключаемому элементу дать имя класса «class2», то такой элемент можно выбрать таким образом: «.class1:not(.class2)».

При создании класса исключения следует учитывать: если к элементу применены несколько классов и один из них является классом исключения, то название класса с символом отрицания должно быть указано после названия другого класса, то есть «.class1.class2:not(.class3)».

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

Как сделать исключение для конкретного тега

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

Чтобы сделать исключение для конкретного тега, определите селектор, который будет применять стиль только к определенному тегу. Например, если мы хотим сделать исключение для тега

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