CSS4 уже сегодня: определяем родительские элементы

Назад в будущее: плагин позволяет нам воспользоваться CSS4 уже сегодня

CSS4 принесет нам множество дополнительных возможностей, а также новые селекторы. Один из этих новых селекторов называется parent, который позволяет нам определять родительские элементы, что до сих пор невозможно сделать в CSS3. Вот так будет выглядеть код:

Код
p! > input {
  color: red;
}


В нашем примере содержимое элемента P окрашивается в красный цвет, так как это родительский элемент элемента INPUT. Так как ни один современный браузер не способен отобразить этот эффект, вам не следует использовать его. Если вы не хотите ждать, скажем, года три, то лучше сосредоточьтесь на cssParentSelector для jQuery. Чтобы воспользоваться этим плагином, вы как обычно вызовете его вместе с jQuery в головной секции вашего HTML-кода. Плагин дальше сам позаботится обо всем.

В использовании селектора вы не ограничены, и поэтому можете использовать его в классах и id. Он предположительно должен работать в комбинации с универсальными селекторами:

Код
*! > p {
  background: green;
}


В данном примере фон каждого родительского элемента для P будет окрашен в зеленый цвет.

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

Код
В данном примере, CSS-параметр color влияет на все элементы LABEL, которые являются дочерними элементами для P, если этот элемент является родительским для элемента INPUT. Поняли?


Завершение

Грядущее обновление спецификации CSS точно осчастливит многих веб-разработчиков. Ну а пока этой радости у нас нет, мы можем спокойно использовать cssParentSelector для jQuery. Этот плагин можно скачать в Github и бесплатно использовать как в личных, так и в коммерческих проектах. Он распространяется под лицензионным соглашением MIT и GPL.

  • FalleN

  • 2344

  • 1

  • 0

Ссылки на статью:

Похожие статьи: