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

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



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.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, CSS4, jQuery
Опубликовал Design FactoRy   Прочитано (раз): 4111   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц January по-русски
Подтверждение кода безопасности :

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


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930