Стилизация внутренних элементов «первой линии»

Я пытаюсь поместить стили CSS в элементы списка в первой строке списка, но кажется, что ни Chrome, ни Firefox, ни Safari не примут этот стиль.

ul:first-line > li {
    display: inline;
    /* my styles here */
}

Я упустил из виду способ, которым я определяю стиль, является ли это упущением в реализации CSS или преднамеренной спецификацией CSS? Если это последнее, есть ли в этом хорошее обоснование?

JSFiddle: http://jsfiddle.net/e3zzg/

Редактировать:
Обратите внимание, кажется довольно окончательным, что в настоящее время этого нельзя достичь с помощью одного лишь CSS, но с исследовательской точки зрения и для потомков мне любопытно, почему это так. Если вы читали спецификацию CSS W3C для псевдоэлемента firstline кажется, нет никаких упоминаний о внутренних элементах. Спасибо всем, кто пытается предоставить альтернативные решения, но если на самом деле нет решения CSS, вопрос здесь «почему», а не «как» или «возможно ли это».


css css-selectors pseudo-element
person Godwin    schedule 04.07.2013    source источник
comment
Можете ли вы использовать Javascript на странице?   -  person Edorka    schedule 04.07.2013
comment
Да, я могу решить это, используя обходной путь JS, но я не об этом. Если это не может быть решено с помощью CSS, мне любопытно, почему.   -  person Godwin    schedule 04.07.2013
comment
Потому что CSS не чувствителен к текущему положению элементов, а только устанавливает их. Я надеюсь, что мой ответ поможет вам.   -  person Edorka    schedule 04.07.2013

Ответы (3)


arrow_upward
8
arrow_downward

Вот «почему» то, что вы хотите сделать, не может быть сделано

спецификация selectors 3 немного более актуальна. Отсюда взято следующее.

«Почему» заключается в том, что :first-letter является псевдоэлементом, то есть «фальшивым» или «ложным» элементом. Он создает "вымышленную последовательность тегов", которую невозможно распознать по сравнению с другими реальными элементами. Так что ваши...

ul:first-line > li

... страдает от тех же проблем, что и эта строка селектора...

ul:before + li

... где комбинатор (будь то > или +) смотрит только на "элемент", а не на "псевдоэлемент" для выбора. Вторая строка не нацелена на «первый» li из ul, который следует за псевдоэлементом :before. Если бы он вообще работал, он бы нацеливался на li, который следует за ul в последовательности html (которой, конечно, никогда не было бы в допустимом макете html).

Однако строка селектора, подобная второй выше, в любом случае не будет работать, потому что на самом деле форма приведенных выше строк недействительно, что подтверждается заявлением в спецификациях, в котором говорится:

Для каждого селектора может появиться только один псевдоэлемент, и если он присутствует, он должен появиться после последовательности простых селекторов, представляющих объекты селектора.

Другими словами, псевдоэлемент может быть помещен в последнюю очередь в последовательности селектора, потому что он должен быть целью свойств, назначаемых этим селектором. . Недопустимые формы, по-видимому, просто игнорируются, как и любой недопустимый селектор.

person ScottS    schedule 04.07.2013
comment
Интересно, вроде логично. Легко увидеть псевдоэлемент before как <li><li:before>1.</li:before>First element</li>, но мне трудно увидеть first-line таким же образом, когда там есть дополнительные элементы. - person Godwin; 04.07.2013
comment
Думаю, это можно представить как <ul><li><ul:first-line>LoremIpsum</ul:first-line></li><li><ul:first-line>dolor</ul:first-line> sit amet</li>... - person Godwin; 04.07.2013
comment
См. аналогичную концепцию, но в обратном порядке: Можно ли использовать для псевдоэлемента :after родственный комбинатор? - person BoltClock; 04.07.2013
comment
Да нет. Это сложнее, потому что background-color подобен <ul><ul:first-line><li>...</li><li>etc...</li></ul:first-line></ul>, но не признает, что эти реальные <li> связаны с ним. На самом деле это относится к началу и концу текста, который оказывается в этих li элементах. Таким образом, вы можете установить свойство color для ul:first-line, и цвет текста в li подберет его путем обычного наследования, но вы не можете наследовать background самого li, потому что ul:first-line фон влияет на текст, а не на li. - person ScottS; 04.07.2013

arrow_upward
2
arrow_downward

Я думаю, вам будет лучше с:

ul > li:first-child

:first-line полезен только для текстовых элементов

person Fiona - myaccessible.website    schedule 04.07.2013
comment
Это стилизует только первый элемент, а не каждый элемент в первой строке! - person Godwin; 04.07.2013
comment
В этом случае, я думаю, вам понадобится решение JavaScript в той или иной форме, я не думаю, что CSS вам здесь поможет. - person Fiona - myaccessible.website; 04.07.2013

arrow_upward
0
arrow_downward

Единственный вариант выделить класс для второй строки — добавить через Javascript к ним конкретное className и установить для них фон. Чтобы получить текущую строку, вы должны перебрать элементы и сравнить их расстояние до вершины списка и его предыдущих братьев и сестер. Я сделал пример jQuery, чтобы вы могли понять: http://jsfiddle.net/JmqxM/

$("ul.numerize-lines").each(function () {
    var list = $(this);
    var currentDistance = 0;
    var currentLine = 0;

    list.find("li").each(function () {
        var item = $(this);
        var offset = .offset();
        var topDistance = offset.top;
        if (topDistance > currentDistance) {
            currentDistance = topDistance;
            currentLine += 1;
        }
        item.addClass("line-" + currentLine);
    });
});

и CSS:

ul li.line-2{
    background-color: #FFF;
}
person Edorka    schedule 04.07.2013
comment
Я не разветвлял скрипку, теперь все в порядке - person Edorka; 04.07.2013