Стиль для текста

[ShootingStar]

Здравствуйте, верстаю шаблон для новичков

.

Я хотел дать шрифту который побольше <h4> и применить к нему стиль, но так как там нужно давать два разных стиля для <h4>, этот вариант не подходит.

Как правильно применить стиль для этого текста? Дать абзацам класс или можно сделать правильную выборку?

[buddah]

h4+h4 {color: green}?

Но если таких h4 на странице будет больше двух, то цвет будет задаваться всем, кроме первого.

h4:last-child {color: green}

выбирает последний (то есть второй в данном случае)

h4:nth-child(2)

выбирает второй

Но класс надежнее всего конечно. Хотя и прямолинейно.

Edited February 18, 2012 by buddah

[ShootingStar]

h4+h4 {color: green}?

Но если таких h4 на странице будет больше двух, то цвет будет задаваться всем, кроме первого.

h4:last-child {color: green}

выбирает последний (то есть второй в данном случае)

h4:nth-child(2)

выбирает второй

Но класс надежнее всего конечно. Хотя и прямолинейно.

                <div id="bottom-center">
                    <h4>Nullam vitae leo vel pede sollicitudin suscipit</h4>

                    <p>Nulla in velit nec metus pharetra bibendum. </p>

                    <h4>Nullam vitae leo vel pede sollicitudin suscipit</h4>

                    <p>Nulla in velit nec metus pharetra bibendum.</p>
                </div>

#bottom-center h4{
    color: #fff;
}
#bottom-center h4 + h4{
    color: #a5bc79;
}

При такой разметке, цвет обоих <h4> будет белым, h4 + h4 работает только если они рядом, тойсть вот так:

<h4>Nullam vitae leo vel pede sollicitudin suscipit</h4>
<h4>Nullam vitae leo vel pede sollicitudin suscipit</h4>

[psywalker]

Используй этот селектор "~"

[ShootingStar]

Используй этот селектор "~"

Все что я нашел по этому селектору:

h4[class~="example"] { color: blue }

или

a[title~="hd digital"] { text-decoration:none}

То есть должен быть какой-то атрибут что бы использовать "~".

h4[class~="top-h"] { color: blue }

Я правильно Вас понял?

[buddah]

Да, я не учел обязательное требование, что теги должны идти сразу друг за другом. Конкретно в данной разметке сработает

#bottom-center :nth-child(3) {
    color: green
}?

Но повторюсь, это не гибко. Поменяется DOM-модель и все.

Edited February 19, 2012 by buddah