Css условия в: Можно ли задать условие в CSS? — Хабр Q&A

html — Условия в псевдоклассах css

Задать вопрос

Вопрос задан

Изменён 3 года 10 месяцев назад

Просмотрен 1k раза

Есть код:

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <style type="text/css">
        .class{
            width:200px;
            height:200px;
            border: 2px solid black;
            font-size: 50px;
            text-align: center;
        }
        .class:hover{
            border-color: red;
        }
    </style>
</head>
<body>
    <div>test</div>
    <div></div>   
</body>
</html>

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

Как это сделать с помощью псевдоклассов css не прибегая к js. И как вообще в псевдоклассах сделать какое-либо условие,которое применяет стили по логике if-a или более сложной структуры?

  • html
  • css
  • css3
.class {
  width: 100px;
  height: 100px;
  border: 2px solid black;
  font-size: 50px;
  text-align: center;
}

.class:empty:hover {
  border-color: red;
}
<div>test</div>
<div></div>

И наоборот:

.class {
  width: 100px;
  height: 100px;
  border: 2px solid black;
  font-size: 50px;
  text-align: center;
}

.class:not(:empty):hover {
  border-color: red;
}
<div>test</div>
<div></div>

4

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

html — Как переопределить правила в css?

Задать вопрос

Вопрос задан

Изменён 4 года 1 месяц назад

Просмотрен 479 раз

Подскажите пожалуйста как можно переопределить правило в css? Я задал стиль всем псевдоэлементам заголоаков, top: 50%, для боковой линии, чтоб она стояла сбоку по центру заголовка, теперь в одной секции мне нужно было переопределить такой же заголовок, сделать его bottom: 0; но стили не переопределяются, !important не помогает.

Вот код:

<section>
        <div>
            <h3>Fully Supported template</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada sodales risus, a adipiscing lorem commodo vitae. Ut semper semper lacus. Suspendisse convallis vel tellus at consectetur. Aenean risus arcu</p>
            <a href="#">Read more</a>
        </div>
    </section>
h3::before {
    content: "";
    background: #222;
    height: 2px;
    width: 120px;
    position: absolute;
    top: 50%;
    margin-left: -150px;
}
h3::after {
    content: "";
    background: #222;
    height: 2px;
    width: 120px;
    position: absolute;
    top: 50%;
    margin-left: 30px;
}

Заголовок, который нужно переопределить

   .template h3::after {
        content: "";
        width: 350px;
        height: 2px;
        background: red;
        position: absolute;
        bottom: 0;
        left: 0;
        display: block;
    }
  • html
  • css
  • css3
  • html5

0

Вам нужно переопределить свойства margin-left и position

h3::before {
  content: "";
  background: #222;
  height: 2px;
  width: 120px;
  position: absolute;
  top: 50%;
  margin-left: -150px;
}

h3::after {
  content: "";
  background: #222;
  height: 2px;
  width: 120px;
  margin-left: 30px;
  position: absolute;
  top: 50%;
}

. template h3::after {
  content: "";
  width: 350px;
  height: 2px;
  background: red;
  display: block;
  margin-left: 0;
  position: static;
}
<section>
  <div>
    <h3>Fully Supported template</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada sodales risus, a adipiscing lorem commodo vitae. Ut semper semper lacus. Suspendisse convallis vel tellus at consectetur. Aenean risus arcu</p>
    <a href="#">Read more</a>
  </div>
</section>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

селекторов css — CSS «и» и «или»

спросил

Изменено 6 месяцев назад

Просмотрено 234 тысячи раз

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

У меня было что-то вроде:

 .registration_form_right input:not([type="radio")
{
 //Неа.
}
 

Но я тоже не хочу стилизовать чекбоксы.

Я пробовал:

 .registration_form_right input:not([type="radio" && type="checkbox"])
.registration_form_right input:нет([type="radio" && "checkbox"])
.registration_form_right input:нет([type="radio") && .registration_form_right input:не(type="checkbox"])
 

Как использовать && ? И мне нужно будет использовать || скоро, и я думаю, что использование будет таким же.

Обновление:
Я до сих пор не знаю, как использовать || и && правильно. В документах W3 ничего не нашел.

  • css
  • css-селекторы
  • условный оператор

5

&& работает путем объединения нескольких селекторов, например:

 
div. класс1.класс2 { /* фу */ }

Другой пример:

 <тип ввода = "радио" />
вход[тип="радио"].class1
{
  /* фу */
}
 

|| работает, разделяя несколько селекторов запятыми, например:

 
<дел> раздел.класс1, раздел.класс2 { /* фу */ }

5

И ( && ):

 .registration_form_right input:not([type="radio"]):not([type="checkbox"])
 

ИЛИ ( || ):

 .registration_form_right input:not([type="radio"]),
   .registration_form_right input:нет([type="checkbox"])
 

5

Для выбора свойств a

И b элемента X :

 X[a][b]
 

Для выбора свойств a ИЛИ b элемента X :

 X[a],X[b]
 

Псевдокласс :not не поддерживается IE. Вместо этого я получил что-то вроде этого:

 .registration_form_right input[type="text"],
.registration_form_right input[type="password"],
.registration_form_right input[type="submit"],
.registration_form_right input[type="button"] {
  ...
}
 

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

0

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

 ввод: не ([тип = "флажок"]) ввод: не ([тип = "радио"])
 

1

Можно каким-то образом воспроизвести поведение «ИЛИ» с помощью & и :not.

 SomeElement.SomeClass [data-statement="все становится сложнее"] :not(:not(A):not(B)) {
    /* для A или B все не так сложно */
}
 

1

Я думаю, вы ненавидите писать больше селекторов и разделять их запятой?

 . registration_form_right ввод: не ([тип = "радио"]),
.registration_form_right input:нет([type="checkbox"])
{
}
 

и кстати это

 нет([type="radio" && type="checkbox"])
 

больше похоже на «ввод, который не имеет обоих этих типов» 🙂

3

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

Селектор not(X или Y) был бы замечательным, чтобы избежать раздувания специфичности, но я думаю, нам придется придерживаться объединения противоположностей, как в этом ответе.

Если мы хотим найти div , который содержит как this , так и that в атрибуте value , мы можем просто соединить оба условия, например:

 div[value*="this "][значение*="это"]
 

В случае, если нам нужен div , который содержит это ИЛИ это , вы можете использовать запятую между обоими условиями, например так:

 div[value*="this"], div[value*="that"]
 

Примечание : Вы можете использовать столько условий, сколько захотите. Это никоим образом не ограничивается 2, как показано в примере.

angular — Как применить условный css?

спросил

Изменено 3 года, 1 месяц назад

Просмотрено 9к раз

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

  • цены (например, карта больше, если цена ниже)
  • , если пользователь отметил его как избранное
  • , являются ли они частью того или иного компонента (URL может совпадать). Например, в одном представлении есть первый компонент со стилем карточки X и второй компонент со стилем карточки Y, но карточки имеют одинаковые данные.

Буду признателен за любое предложение!

  • css
  • угловой
  • угловой материал

1

 

Это позволяет нам добавлять классы на основе условия:

 

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

 

мы можем легко переключать классы CSS следующим образом:

 

мы можем присвоить имя класса переменной:

 

NgClass также может назначать сразу несколько имен статических классов:

Мы также можем использовать ngClass для назначения нескольких классов CSS на основе нескольких условий.

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

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