Псевдоэлемент CSS для применения первого символа элемента

У меня есть следующий контент в моем теге h1: «(Hello World)», поэтому я добавляю следующее в свой css, чтобы изменить первый символ этого элемента:

h1:first-letter { font-size:63px; color:#510007; font-family:Helvetica; }

Но, как я заметил, первая буква предназначена только для букв, так есть ли обходные пути для применения этого стиля к первому символу? В данном случае это "(".


css css-selectors pseudo-element
person rodrigoalvesvieira    schedule 13.04.2011    source источник
comment
На самом деле результат оказался не таким, как я ожидал, так как два первых персонажа стали большими! jsfiddle.net/Bk5M8 Как сказал BoltClock, если первый символ является знаком препинания, то буква рядом с ним будет применить стиль тоже. Если первый символ является буквой, то это будет затронуто только это.   -  person David    schedule 13.04.2011

Ответы (1)


arrow_upward
7
arrow_downward

Из спецификации:

Пунктуация (то есть символы, определенные в Unicode [UNICODE] в «открытый» (Ps), «закрытый» (Pe), «начальный» (Pi), «конечный» (Pf) и «другие» (Po) классы пунктуации), которые предшествуют или следуют за первой буквой.

Таким образом, ваша скобка и буква H выбраны :first-letter, потому что ( считается знаком пунктуации, а не буквой.

Есть два обходных пути:

  1. Заключите открывающую скобку в теги span:

    <!-- To style both (), wrap both in <span> tags -->
<h1><span>(</span>Hello World)</h1>

    и цель h1 span:

    h1 span {
    font-size: 63px;
    color: #510007;
    font-family: Helvetica;
}

  2. Опустите скобки из текста:

    <h1>Hello World</h1>

    и используйте вместо них :before и/или :after (не поддерживается в IE7 и старше):

    /* To style both (), use h1:before, h1:after */
h1:before {
    font-size: 63px;
    color: #510007;
    font-family: Helvetica;
}

h1:before { content: '('; }
h1:after { content: ')'; }
person BoltClock    schedule 13.04.2011
comment
Любые решения этой проблемы, не касаясь HTML. Что в моем случае нельзя модифицировать? - person Esser; 04.02.2015
comment
@Esser: Что сказал Болдевин. - person BoltClock; 04.02.2015
comment
@BoltClock мой вопрос заключался в том, есть ли исправление для метода CSS, поскольку я бы попытался избежать использования javascript, когда это выполнимо с помощью CSS. Но спасибо. - person Esser; 11.02.2015