Главная > Java-Скрипты, CSS/Style Sheets > CSS4 уже сегодня: определяем родительские элементы при помощи cssParentSelector.js

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


11 февраля 2013, 14:45. Разместил: Design FactoRy
CSS упрощает нашу задачу в определении дочерних и родственных элементов. Родительские элементы, тем не менее, пока что нельзя определить при помощи CSS. CSS4 предоставит такую возможность, но вряд ли стоит ждать браузерной поддержки в ближайшее время. jQuery-плагин cssParentSelector позволяет нам использовать новый CSS4-селектор parent уже сегодня.

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

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

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

p! > input {
color: red;
}

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

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

*! > p {
background: green;
}

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

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

!p label > input {
color: blue;
}

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

Завершение

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