html - элемент - виды селекторов тестирование




Могу ли я написать элемент выбора селектора CSS, не имеющий определенного класса? (6)

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

<html class="printable">
    <body class="printable">
        <h1 class="printable">Example</h1>
        <nav>
            <!-- Some menu links... -->
        </nav>
        <a href="javascript:void(0)" onclick="javascript:self.print()">Print me!</a>
        <p class="printable">
            This page is super interresting and you should print it!
        </p>
    </body>
</html>

Я хотел бы написать селектор, который выбирает все элементы, у которых нет класса «printable», который в этом случае является навигацией и элементами.

Это возможно?

ПРИМЕЧАНИЕ. В фактическом HTML, где я хотел бы использовать это, будет намного больше элементов, у которых нет класса «printable», чем do (я понимаю, что в приведенном выше примере это наоборот).


Использование псевдо-класса: :not() :

Для выбора всего, кроме определенного элемента (или элементов). Мы можем использовать псевдо-класс CSS :not() . Псевдокласс :not() требует в качестве аргумента CSS селектора. Селектор будет применять стили ко всем элементам, кроме тех элементов, которые указаны в качестве аргумента.

Примеры:

/* This query selects All div elements except for   */
div:not(.foo) {
  background-color: red;
}


/* Selects all hovered nav elements inside section element except
   for the nav elements which have the ID foo*/
section nav:hover:not(#foo) {
  background-color: red;
}


/* selects all li elements inside an ul which are not odd */
ul li:not(:nth-child(odd)) { 
  color: red;
}
<div>test</div>
<div class="foo">test</div>

<br>

<section>
  <nav id="foo">test</nav>
  <nav>Hover me!!!</nav>
</section>
<nav></nav>

<br>

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

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

/* This selector has a higher specificity than the #foo below */
#foo:not(#bar) {
  color: red;
}

/* This selector is lower in the cascade but is overruled by the style above */
#foo {
  color: green;
}
<div id="foo">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>


Псевдо-класс :not отрицание

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

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

Простой пример: исключение по классу

div:not(.class)

Выберем все элементы div без класса .class

div:not(.class) {
  color: red;
}
<div>Make me red!</div>
<div class="class">...but not me...</div>

Сложный пример: исключение по типу / иерархии

:not(div) > div

Выбрали бы все элементы div которые arent дети другого div

div {
  color: black
}
:not(div) > div {
  color: red;
}
<div>Make me red!</div>
<div>
  <div>...but not me...</div>
</div>

Сложный пример: цепочки псевдоселекторов

За исключением того, что вы не можете цепочки / гнезда :not селекторами и псевдоэлементами, вы можете использовать их вместе с другими псевдоселекторами.

div {
  color: black
}
:not(:nth-child(2)){
  color: red;
}
<div>
  <div>Make me red!</div>
  <div>...but not me...</div>
</div>

Поддержка браузера и т. Д.

:not является селектором уровня CSS3 , основным исключением в плане поддержки является то, что это IE9 +

Спектр также делает интересный момент:

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


Как говорили другие, вы просто ставите: not (.class). Для селекторов CSS я рекомендую посетить эту ссылку, это было очень полезно на протяжении всего моего путешествия: https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

  1. Х: нет (селектор)

    1. div: not (#container) {
    2. цвет синий;
    3. }

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

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

1. *:not(p) {
2. color: green;
3. }

Обычно вы добавляете селектор классов к псевдоклассу :not() следующим образом:

:not(.printable) {
    /* Styles */
}

Но если вам нужна лучшая поддержка браузера (IE8 и более старые не поддерживают :not() ), вам, вероятно, лучше создавать правила стиля для элементов, которые имеют класс «printable». Если даже это невозможно, несмотря на то, что вы говорите о своей фактической разметке, вам, возможно, придется работать над разметкой вокруг этого ограничения.

Имейте в виду, что в зависимости от свойств, которые вы устанавливаете в этом правиле, некоторые из них могут быть наследованы потомками, которые являются .printable или иным образом влияют на них так или иначе. Например, хотя display не наследуется, установка display: none на a :not(.printable) не позволит отображать его и всех его потомков, поскольку он полностью удаляет элемент и его поддерево из макета. Вы часто можете обойти это, используя visibility: hidden а это позволит видимым потомкам показывать, но скрытые элементы все равно будут влиять на макет, как они изначально сделали. Короче говоря, будьте осторожны.



пример

  [class*='section-']:not(.section-name) {
    @include opacity(0.6);
    // Write your css code here
  }

// Opacity 0.6 all "section-", но не "section-name"





css-selectors