У меня есть сайт, который я разрабатываю с помощью CSS3, и у меня есть тег h1 для заголовка:
<h1>main title</h1>
Теперь я хочу, чтобы заголовок был другого цвета:
<h1>main <span>title</span></h1>
Итак, я:
h1 {
color: #ddd;
}
h1 span {
color: #333;
}
Есть ли способ не использовать тег span и указывать только в CSS, что последнее слово отличается от другого?
Это невозможно с чистым CSS. Однако вы можете использовать lettering.js, чтобы получить селектор ::last-word. CSS-Tricks имеет отличную статью по этому вопросу: CSS-Tricks: вызов для nth-everything. Затем вы можете сделать следующее:
h1 {
color: #f00;
}
/* EDIT: Needs lettering.js. Please read the complete post,
* before downvoting. Instead vote up. Thank you :)
*/
h1::last-word {
color: #00f;
}
"последнее слово" не будет работать в каждом браузере; например, он не работает с Safari. Я бы не принял принятый ответ. Я не думаю, что было бы неплохо импортировать целую библиотеку или плагин, чтобы изменить последнее слово одного названия, это как "убить ошибку с помощью пушки"... Вместо этого я бы использовал одну функцию Javascript и глобальный класс. Что-то вроде этого:
<h1>This is my awesome <span class="last-word">title</span></h1>
CSS
<style>
.last-word {font-weight:bold; /* Or whatever you want to do with this element */ }
</style>
Изначально у вас было бы что-то вроде этого:
<h1 class="title">This is my awesome title</h1>
Затем вы можете инициализировать Javascript-метод, чтобы изменить последнее слово на $(document).ready() = >
<script>
$(document).ready(function() {
$('.title').each(function(index, element) {
var heading = $(element);
var word_array, last_word, first_part;
word_array = heading.html().split(/\s+/); // split on spaces
last_word = word_array.pop(); // pop the last word
first_part = word_array.join(' '); // rejoin the first words together
heading.html([first_part, ' <span class="last-word">', last_word, '</span>'].join(''));
});
});
</script>
Удачи.
Нет, нет. В CSS существуют только ::first-letter и ::first-line. Все остальное должно выполняться вручную с помощью элемента (например, span).
Примечание: Планируется не ::first-word и ::last-word, по крайней мере, не в Селектора уровня 4 spec.
CSS действительно не взаимодействует с текстом таким образом. он взаимодействует с элементами в дереве DOM. Добавление пролета вокруг этого слова является стандартным способом (который я видел, по крайней мере) для дифференциации текста. Просто используйте тег span, сопровождающий код будет благодарен вам за это.
Нет. Селектор для определенных слов отсутствует, см. Селекторы Уровень 3: 2. Селектора.
Вы должны использовать тег span или запустить JavaScript, чтобы преобразовать каждое слово в диапазон, содержащий это слово.
CSS работает с элементами... но вообще не по тексту или данным внутри элемента. Вы могли бы использовать Javascript, если хотите, чтобы работать с фактическим текстом внутри элементов.
Нет, в CSS нет селектора, который ссылался бы на последнее (или первое) слово элемента. Есть псевдоэлементы для первой буквы и для первой строки, но слова должны быть обернуты в контейнеры, чтобы их стиль отдельно.
CSS не знает о словах. Единственное, что существует: первая буква и первая строка. Конструкция, подобная слову и псевдоэлементу для последнего, не существует.
Если вы действительно хотите использовать обходной путь внутри одного элемента, вы должны использовать javascript для анализа последнего слова. Я думаю, что вы идете, это лучший способ, когда у вас есть только несколько случаев на странице.
Если вы используете его для h1, вы должны иметь его так или иначе только один раз на странице.
Взяв iblue, ответьте, но сделайте немного более разумным.
Используйте lettering.js со следующей настройкой:
$(document).ready(function() {
$('h1').lettering('words');
});
Это разделит тэг <h1> на что-то вроде этого:
<h1>
<span class="word1">Highlight</span>
<span class="word2">the</span>
<span class="word3">last</span>
<span class="word4">word</span>
<span class="word5">a</span>
<span class="word6">different</span>
<span class="word7">color</span>
</h1>
Конечно, мы не можем просто нацелиться на .word7, поскольку это может быть не последним, поэтому мы можем использовать псевдо-класс CSS :last-child.
h1 {
color: #333;
}
h1 > span:last-child {
color: #c09;
}
Теперь последнее слово отличается от другого. Посмотрите живой пример.
Единственное, о чем нужно быть осторожным, - поддержка :last-child
Возможно, с селектором "после"
element1
{
properties
main
}
element1:after
{
content: "title";
color: pickone;
}
Я рекомендую остаться с "span". Если вы не хотите иметь огромный css с этим дополнительным материалом, вы всегда можете сделать это в своем html:
<span style="color:#000;">text</span>