Блог

Главная - Вопросы по программированию - чистый css для стилизации элемента, который чего-то не содержит

чистый css для стилизации элемента, который чего-то не содержит

#css

Вопрос:

Мне интересно, можно ли применить css к чему-то, что чего-то не содержит.

Например,

У меня есть компонент, который может содержать h1 либо a h1 , либо и span :

 <div class="block">
 <h1> title </h1>
</div>

или

 <div class="block">
  <h1> title </h1>
  <span> sub </span>
</div>

Я знаю о выбранном :not , но я считаю, что это повлияет на все элементы, кроме :not

Если бы я хотел сделать что-то вроде:

 .block { display: flex }
.block:DoesNotContain(span) { align-items: center }

Есть ли такой способ сделать это?

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

1. Я действительно не думаю, что это возможно только с помощью чистого CSS.

2. Я бы сказал, нет. но вы можете решить свою проблему программно.

Ответ №1:

Я нашел решение, оно довольно приятное и простое:

Мы можем определить базовую линию и вместо « DoesNotContain » включить все, что в ней содержится, если мы можем удалить с помощью :has селектора

 .block { 
   display: flex;
   align-items: center;
}
.block:has(span) {
   align-items: normal;
}

Это не совсем одно и то же, но оно дает те же результаты.

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

1. Да, это способ сделать это.

Метки: ,