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

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

Вопрос задан

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

Просмотрен 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 года 5 месяцев назад

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

Подскажите пожалуйста как можно переопределить правило в 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

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

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

Почта

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

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

Почта

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

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

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

спросил

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

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

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

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

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

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

1

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

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

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

 
 example-class]="условие">

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

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

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

 <дел
  [нгкласс]="{
  'пример-класс': условие,
  'другой класс': !условие
}"
>

источник: https://malcoded.com/posts/angular-ngclass/

1

Вы можете использовать NgClass для добавления условных классов. Для получения дополнительной информации обратитесь к документации — https://angular.io/api/common/NgClass

.

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

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

CSS | Условные правила — GeeksforGeeks

Улучшить статью

Сохранить статью

  • Последнее обновление: 02 июл, 2021

  • Читать
  • Обсудить

    • Улучшить статью

    Сохранить статью

    Условные правила CSS — это не что иное, как функция CSS, в которой стиль CSS применяется на основе определенного условия. Таким образом, условие здесь может быть либо истинным, либо ложным, и оно будет выполнено на основе утверждений/стиля.
    Эти правила в конечном итоге попадают под правило CSS at-rule , поскольку они начинаются с @ .
    Условные правила:

    • @Supports
    • @media
    • @document

    @Supports: . браузер и применить стиль на основе этого.
    Синтаксис:  
     

     @supports ("  условие  ") {
   /* Применяемый стиль */
}

    Example:  
     

    html

    < html >

    < head >

         < title >Поддерживает правило title >

         < Стиль >

    @Supports (дисплей: сетка) {

    Раздел H2 {

    .

                     цвет: белый;

                     отступ: 15 пикселей;

                 }

             }

         style >

    head >

    < body >

         < section >

    < H2 > Geeksforgeeks H2 >

    < H4 > Портал компьютерных наук для фанатов H4 >

    .

    HTML >

    Выход:

    В вышеприведенном примере Browser поддерживается на отображение.
    @media: Условное правило @media — это правило, которое используется для применения стиля на основе медиа-запросов. Его можно использовать для проверки ширины и/или высоты устройства и применения указанного стиля на основе этого.
    Синтаксис:  
     

     Экран @media и ("  условие  ") {
   /* Применяемый стиль */
}

    Пример:  
     

    html

    < HTML >

    < . style >

             @media screen and (max-width: 700px) {

                 9 1 9

    section0032                  цвет фона: зеленый;

                     цвет: белый;

                     отступ: 15 пикселей;

                 }

             }

         style >

    head >

    < body >

         < section >

             < h2 >GeeksforGeeks h2 >

             < h4 >Портал информатики для гиков h4 >

         section >

    body >

    html >

    Output:  
    Screen width more then 700px:  
     

    Ширина экрана меньше или равна 700 пикселей:  
     

    В приведенном выше примере, когда ширина браузера превышает 700 пикселей, стиль не применяется, но когда размер окна браузера меньше 700 пикселей, применяется стиль.
    @document: Условное правило @document используется для применения стиля к указанному URL-адресу, т. е. стиль будет применяться только к указанному URL-адресу.
    Синтаксис:  
     

     @document url("  YOUR-URL  ") {
   /* Применяемый стиль */
}

    Является экспериментальным и работает только в Firefox с префиксом -moz-, т.е. @-moz-document .
    Пример:  
     

    html

    < html >

    < head >

         < title >Document Rule title >

    < Стиль >

    @-Moz-document url ("http: //localhost/gfg/document-rule. html")0012

                 секция h2 {

                     цвет фона: зеленый;

                     цвет: #fff;

                     отступ: 15 пикселей;

    }

    }

    Стиль >

    0011 head >

    < body >

         < section >

             < h2 >GeeksforGeeks h2 >

             < h4 >Информатический портал для гиков h4 2 >2

         section >

    body >

    html >

    Output:  

    В приведенном выше примере стиль применяется, когда указанный URL является посещаемым.

    No related posts.