Статьи

Мысли о предстоящем родительском селекторе CSS

Декабрь 5, 2018

Некоторое время назад я писал о будущих селекторах CSS4 , а именно о выпуске рабочего проекта CSS-селекторов уровня 4. Это была такая хорошая новость — видеть, что все постоянно движется. Я говорю это, потому что до того, как CSS3 достигнет финальной фазы рекомендаций, еще далеко, и все же мы видим новости о будущем CSS4. Разве это не круто?

Тем временем я немного подумал о предстоящем родительском селекторе CSS. В настоящее время, если вы спросите меня, я думаю, что это будет самая удивительная функция и определенно находится в верхней части моего списка пожеланий CSS.

Синтаксис

С тех пор, как родительский селектор CSS привлек внимание, было много дискуссий о его синтаксисе. В основном не одобряется внешний вид синтаксиса в текущем рабочем проекте:

$E > F{
    background: #fff;
}

Выберите родительский элемент E для элемента F.

Однако, наряду с последним проектом редакции , кажется, что ситуация немного улучшилась:

E! > F{
    background: #fff;
}

 Опять же, новейший синтаксис, который помогает определить тему селектора.

Ну, это, вероятно, не будет последним редактированием синтаксиса, поэтому я уверен, что в будущем мы увидим больше изменений.

CSS родительский селектор на практике

Эта статья не о самом синтаксисе, а о том, как бы вы использовали родительский селектор CSS в своей повседневной работе? Кроме того, насколько это может помочь вам писать лучшие и умные строки CSS ?

Вот вопросы, которые я задавал себе в последнее время по этому вопросу, поэтому я подумал о некоторых примерах сценариев:

Выпадающее меню

Для выпадающих меню CSS мы могли бы соответственно стилизовать li, когда оно содержит подменю.

В этом случае, для раздела Категории, вот как мы могли бы добавить стрелку справа для родительского элемента списка:

li! > ul{
  background: url(arrow.png) no-repeat right center;
  padding: 0 20px 0 0;
}

 

Интерактивная форма

Как я упоминал в моей предыдущей статье о селекторах CSS4 , выделение формы, когда фокусируется внутренний ввод, может быть практическим примером для родительского селектора CSS.

Интерактивная форма

fieldset! > input:focus{
  background: #f3eab1; /* light yellow */
}

 

Новый метод очистки

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

Очистка поплавков

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

<div>
  <div class="float-left"></div>
  <div class="float-right"></div>
</div>

и CSS-фреймворк, содержащий:

.float-left{
  float: left;
}
.float-right{
  float: right;
}

… это может быть будущее решение для очистки: 

div:before! > .float-left, div:after! > .float-left,
div:before! > .float-right, div:after! > .float-right{
  content:"";
  display:table;
}

div:after! > .float-left,
div:after! > .float-right{
  clear:both;
}

div! > .float-left,
div! > .float-right{
  zoom:1;
}

Если вы хотите перевести вышеприведенное: если div содержит .float-left или .float-right, тогда очистите поплавки правильно.

CSS родительский селектор будет качаться

Я почти уверен, что, как только это будет поддержано, в дикой природе появится много умных техник. Вышеуказанные ситуации являются лишь некоторыми идеями, которые я имел в виду, и я хотел бы поделиться с вами. Круто то, что нам не нужно полагаться на JavaScript для выбора родительского элемента, и это открывает путь к новым возможностям.

 

 

37
Share: