x
 
Александр Ильинский
19 апреля 2012

Артём, здравствуйте.

Вопрос по вёрстке. Мне нужно особенно выровнять абзац, у которого внутри есть картинки. Как в ЦСС работать с родителями?



Александр, когда наступит будущее и браузеры начнут поддерживать ЦСС4, ваша задача решится так:

$P IMG {
  /* абзац с картинками */
  text-align: center;
}

Или так, с восклицательным знаком вместо доллара:

P! IMG { }

Сейчас ни один браузер не поддерживает произвольное назначение объекта селектора (subject of a selector). Объектом селектора всегда является элемент (или элементы), представленные последней частью селектора:

.specials OL > LI:only-child {
  /* Единственный пункт пронумерованного
     списка, расположенного внутри блока
     с классом specials */
}

В ЦСС4 будут возможны вариации:

.specials $OL > LI:only-child {
  /* Пронумерованный список внутри блока
     .specials, содержащий один единственный
     пункт  */
}

$.specials OL > LI:only-child {
  /* Блок .specials, у которого внутри есть
     пронумерованные списки с одним пунктом  */
}

Пока же сложные селекторы — прерогатива Джейквери. В вашем случае я бы скриптом добавил абзацам с картинками спецкласс:

$('p:has(img)').addClass('has-img');

Рабочий и редакторский черновики спецификации разнятся.


P. S.
Это был совет о разработке веб-интерфейсов. Хотите узнать всё об умной вёрстке, правильных скриптах, грациозной деградации, трюках и работе технолога с дизайнером? Присылайте вопросы.

Поделиться
Отправить

Комментарии

Андрей Савченко
19 апреля 2012

Мне кажется, вы немного вводите людей в заблуждение, говоря о прерогативе jQuery. В девелоперском мире есть из чего выбирать. Если говорить о действительно сложных селекторах, то наиболее подходящим решением будет Slick:

https://github.com/mootools/slick

Вадим Макеев
19 апреля 2012

Очень полезно также будет прочитать статью Джонатана Снука «Почему у нас нет селектора по родителю»:

http://web-standards.ru/articles/parent-selector/

Иван Титов
19 апреля 2012

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

Причина — хотя бы косметическая. При использовании js-замены посетитель может сначала увидеть одно оформление блоков, а через секунду — другое (когда догрузится страница и выполнится скрипт).


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Сайты для слабовидящих 2 За какими вещами нужно следить, чтобы при загрузке страница выглядела прилично? 1 С чего начать изучение ЦСС? 1 Как сделать, чтобы блок при прокрутке залипал у верхней границы окна браузера? 5




Недавно всплыло

Как следует поступить дизайнеру, если клиент постоянно вспоминает «нечто очень важное» 7 Все уже успели заметить, что вы почти во всех пятничных примерах советуете немного поунижаться 12 1 Выбранные элементы списка, как не забывать принципы из советов бюро и когда нужен логотип 1