Главная » Языки программирования

Does not have class css

На чтение 11 мин
Содержание
  1. How to select HTML element without attribute with CSS?
  2. Example
  3. Selecting Elements That Don’t Have Particular Attribute or Have It Empty
  4. Selecting Elements That Don’t Have Particular Attribute
  5. For example let’s use data-name custom attribute selector:
  6. Does not have class css
  7. Try it
  8. Syntax
  9. Description
  10. Examples
  11. Using :not() with valid selectors
  12. HTML
  13. CSS
  14. Result
  15. Using :not() with invalid selectors
  16. HTML
  17. CSS
  18. Result
  19. Specifications
  20. Browser compatibility
  21. See also
  22. Found a content problem with this page?
  23. CSS Selector to Select Elements Not Having Certain Class / Attribute / Type
  24. Notes
  25. CSS-селектор :not. Полезные примеры
  26. Пример 1. Элемент без класса
  27. Пример 2. Изменение внешнего вида всех элементов, кроме наведенного
  28. Пример 3. Меню с разделителями между элементами
  29. Пример 4. Debug css
  30. Пример 5. Поля форм
  31. Поддержка

How to select HTML element without attribute with CSS?

There might be cases, where You want to select element that does not have particular attribute. Not have attribute might actually mean two different aspects. One could consider empty attribute like if it not exists, while other would said that the element have attribute but empty. We will focus here on case where we treat both empty or non existent attribute as non existent.

The use case here is to select all bare links, in other words those links that do not have any CSS class applied. To select those elements, we need to use attribute selector twice, once assuming empty content and the other one assuming no attribute at all. To select elements without attribute we can use not selector extension while for empty attribute attribute just CSS attribute selector with empty value.

Example

Selecting all a elements that do not have CSS class applied:

The first selector selects all a elements that do not have class attribute, the latter one selects all with empty class attribute. The same technique can be used to select any other elements with empty attribute.

The selector will match for example:

Selecting Elements That Don’t Have Particular Attribute or Have It Empty

As in class example we need to combine not attribute selector with empty attribute selector:

This will match any div element without (or empty) id attribute:

But will not match if element have any value on id attribute:

Selecting Elements That Don’t Have Particular Attribute

The slightly different case is when selecting element that do not have attribute. The empty value means that attribute is empty but it still exists. To select such elements we will use only not operator.

For example let’s use data-name custom attribute selector:

This will match elements that do not have data-name attribute:

But it will not match those which have empty data-name attribute:

Источник

Does not have class css

The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class.

Try it

The :not() pseudo-class has a number of quirks, tricks, and unexpected results that you should be aware of before using it.

Syntax

The :not() pseudo-class requires a comma-separated list of one or more selectors as its argument. The list must not contain another negation selector or a pseudo-element.

Читайте также:  For over dict python

Description

There are several unusual effects and outcomes when using :not() that you should keep in mind when using it:

  • Useless selectors can be written using this pseudo-class. For example, :not(*) matches any element which is not an element, which is obviously nonsense, so the accompanying rule will never be applied.
  • This pseudo-class can increase the specificity of a rule. For example, #foo:not(#bar) will match the same element as the simpler #foo , but has the higher specificity of two id selectors.
  • The specificity of the :not() pseudo-class is replaced by the specificity of the most specific selector in its comma-separated argument of selectors; providing the same specificity as if it had been written :not(:is(argument)) .
  • :not(.foo) will match anything that isn’t .foo , including and .
  • This selector will match everything that is «not an X». This may be surprising when used with descendant combinators, since there are multiple paths to select a target element. For instance, body :not(table) a will still apply to links inside a , since , , , , , etc. can all match the :not(table) part of the selector.
  • You can negate several selectors at the same time. Example: :not(.foo, .bar) is equivalent to :not(.foo):not(.bar) .
  • If any selector passed to the :not() pseudo-class is invalid or not supported by the browser, the whole rule will be invalidated. The effective way to overcome this behavior is to use :is() pseudo-class, which accepts a forgiving selector list. For example :not(.foo, :invalid-pseudo-class) will invalidate a whole rule, but :not(:is(.foo, :invalid-pseudo-class)) will match any (including and ) element that isn’t .foo .

Examples

Using :not() with valid selectors

This example shows some simple cases of using :not() .

HTML

p>I am a paragraph.p> p class="fancy">I am so very fancy!p> div>I am NOT a paragraph.div> h2> span class="foo">foo inside h2span> span class="bar">bar inside h2span> h2>

CSS

.fancy  text-shadow: 2px 2px 3px gold; > /* 
elements that don't have a class `.fancy` */ p:not(.fancy)  color: green; > /* Elements that are not 
elements */ body :not(p)  text-decoration: underline; > /* Elements that are not s or `.fancy` */ body :not(div):not(.fancy)  font-weight: bold; > /* Elements that are not s or `.fancy` */ body :not(div, .fancy)  text-decoration: overline underline; > /* Elements inside an that aren't a with a class of `.foo` */ h2 :not(span.foo)  color: red; >

Result

Using :not() with invalid selectors

This example shows the use of :not() with invalid selectors and how to prevent invalidation.

HTML

p class="foo">I am a paragraph with .foop> p class="bar">I am a paragraph with .barp> div>I am a div without a classdiv> div class="foo">I am a div with .foodiv> div class="bar">I am a div with .bardiv> div class="foo bar">I am a div with .foo and .bardiv>

CSS

/* Invalid rule, does nothing */ p:not(.foo, :invalid-pseudo-class)  color: red; font-style: italic; > /* Select all 
elements without the `foo` class */ p:not(:is(.foo, :invalid-pseudo-class))  color: green; border-top: dotted thin currentcolor; > /* Select all elements without the `foo` or the `bar` class */ div:not(.foo, .bar)  color: red; font-style: italic; > /* Select all elements without the `foo` or the `bar` class */ div:not(:is(.foo, .bar))  border-bottom: dotted thin currentcolor; >

Result

The p:not(.foo, :invalid-pseudo-class) rule is invalid because it contains an invalid selector. The :is() pseudo-class accepts a forgiving selector list, so the :is(.foo, :invalid-pseudo-class) rule is valid and equivalent to :is(.foo) . Thus, the p:not(:is(.foo, :invalid-pseudo-class)) rule is valid and equivalent to p:not(.foo) .

If :invalid-pseudo-class was a valid selector, the first two rules above would still be equivalent (the last two rules showcase that). The use of :is() makes the rule more robust.

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jul 18, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

CSS Selector to Select Elements Not Having Certain Class / Attribute / Type

The :not CSS pseudo-class can be used to select elements that do not contain a specific class, id, attribute etc.

Usually we need to select elements that satisfy a certain condition — they may have a certain class / attribute / id etc.

/* select all elements having class "menu-active" */ .menu-active < font-weight: 700; >/* select all "p" elements */ p < line-height: 2; >/* select input elements having "text" type attribute */ input[type="text"]

However many times we need just the opposite case — it may be required to select elements that are not having a specific class / attribute / id etc.

This can be achieved using the :not pseudo-class selector.

:not has a functional notation and takes a simple selector as its argument.

/* select all elements not having class "menu-active" */ :not(.menu-active) < font-weight: 300; >/* select "p" elements not having class "menu-active" */ p:not(.menu-active) < font-weight: 300; >/* select all elements except "p" */ :not(p) < line-height: normal; >/* select input elements not having "text" type attribute */ input:not([type="text"])

Notes

Currently :not takes only a simple selector as its argument. No complex selectors are allowed.

There are proposals to bring complex selectors as argument to :not . However most browsers have not implemented it yet.

Источник

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

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

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

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

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

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

ul li < /* наши красивые стили */ >

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

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

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

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

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

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

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

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

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

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

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

/* с перезаписью свойств */ ul:hover li < opacity:0.5; > ul:hover li:hover < opacity:1; >

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

/* используя :not() */ ul:hover li:not(:hover) < opacity:0.5; >

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

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

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

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

.menu-item:after < content: ' | '; > .menu-item:last-child:after < content: none; >

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

.menu-item:nth-last-child(n+2):after < content: ' | '; >

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

.menu-item:not(:last-child):after < content: ' | '; >

Пример 4. Debug css

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

/* подсвечиваем теги без необходимых атрибутов */ img:not([alt]), label:not([for]), input[type=submit]:not([value]) < outline:2px solid red; > /* тревога, если первый child внутри списка не li и прочие похожие примеры */ ul > *:not(li), ol > *:not(li), dl > *:not(dt):not(dd) < outline:2px solid red; >

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

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

select, textarea, [type="text"], [type="password"] < /* стили для текстовых полей ввода */ >

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

select, textarea, [type="text"], [type="password"], [type="color"], [type="date"], [type="datetime"], [type="datetime-local"], [type="email"], [type="number"], [type="search"], [type="tel"], [type="time"], [type="url"], [type="month"], [type="week"] < /* стили для текстовых полей ввода */ >

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

select, textarea, [type]:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([type="image"]) < /* стили для текстовых полей ввода */ >

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

Поддержка

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

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

Источник

Оцените статью
© 2023 Программирование