Блог

Главная - Вопросы по программированию - CSS / SASS выбирает элементы на основе класса, но исключает определенные элементы с тем же классом

CSS / SASS выбирает элементы на основе класса, но исключает определенные элементы с тем же классом

#html #css #sass

#HTML #css #sass

Вопрос:

Я собираюсь ударить себя, как только придет ответ… итак, что я пытаюсь сделать, это добавить границу ко всем элементам с <anyElement class="required active"> , но не к <select class="required active"> . Разница заключается в <select> элементе.

Пример пробовал lol:

 .required.active, :not(select.required.active) {
    border: 1px solid red;
}

Используя CSS3 и / или SASS.

Спасибо!

Ответ №1:

То, что вы ищете, может быть достигнуто с помощью этого: CSS:

 .required.active:not(select).required.active{
border: 1px solid red;
color:blue  
 <!DOCTYPE html>
<html>
  <head></head>
<body>
  <p class="required active">Hello</p>
  <p class="required active">Hello</p>
  <p>Hello</p>
  <select class="required active">
    <option>Hello<option>
  </select>
</body>
</html>

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

Ответ №2:

Возможно, это то, что вы ищете.

Как я понял из вашего сообщения, вам нужно исключить только теги < select > с «обязательными» и «активными» классами.

 :not(select).required.active {
  border: 1px solid red;
}  
 <div class="required active">
  qwe
</div>
<p class="required active">
  qwe
</p>
<input type="text" class="required active" value="qwe">
<select class="required active">
  <option value="1">qwe</option>
</select>

В этом фрагменте мы использовали селектор :not() CSS3, чтобы исключить <select> тег с «обязательными» и «активными» классами.

Для дальнейшего объяснения CSS-селектора :not(), пожалуйста, обратитесь к этим ссылкам:

Dev. Mozilla Org: (CSS:not() Селектор)

W3Schools.COM: (селектор CSS:not())

Комментарии:

1. Идеально — избегает тегов select, но ограничивает все остальные классами. Все сделано с наименьшим количеством кода!

2. Счастливого кодирования @RooksStrife! 🙂