Styling 'first-line' inner elements

Question

I'm attempting to put CSS styles on the list items in the first line of a list but it seems that neither Chrome, Firefox, nor Safari will accept the style.

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

Have I overlooked the way in which I'm specifying the style, is this an oversight in CSS implementation or a deliberate CSS specification? If it is the latter, is there a good rationale behind this?

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

Edit:
Please note, it seems pretty definitive that this can currently not be achieved using CSS alone but from a research standpoint and for posterity, I'm curious as to why this is. If you read the W3C CSS specification on the firstline pseudo-element there doesn't seem to be any mention of inner elements. Thanks to everyone trying to provide alternate solutions, but unless there actually is a CSS solution, the question here is 'why', not 'how' or 'is it possible'.

Yeah, I can solve this using a JS workaround but that's not what I'm asking here. If it can't be solved with CSS, I'm curious why. — Godwin, Jul 04 '13 at 16:09
Because CSS is not sensitive to the elements current position, only sets them. I hope my answer can help you. — Edorka, Jul 04 '13 at 16:13

ScottS · Accepted Answer · 2013-07-04T16:59:37.047

Here's "Why" What You Want to Do Cannot Be Done

The selectors 3 spec is a little more up to date. The following is taken from that.

The "why" is because the :first-letter is pseudo-element, that is, a "fake" or "false" element. It is producing a "fictional tag sequence", which is not recognizable in relation to other real elements. So your...

ul:first-line > li

...suffers from the same issues as this selector string...

ul:before + li

...where the combinator (whether > or +) is only looking at the "element" not the "pseudo-element" for selection. The second string does not target the "first" li of the ul that is following a :before pseudo-element. If it were to work at all, it would target an li that follows the ul in the html sequence (which, of course, there would never be one in a valid html layout).

However, a selector string similar to the second one above would not work anyway, because in actuality, the form of the above strings is not valid, as confirmed by the statement in the specifications that says:

Only one pseudo-element may appear per selector, and if present it must appear after the sequence of simple selectors that represents the subjects of the selector.

In other words, a pseudo-element can only be positioned dead last in the selector sequence, because it must be the target of the properties being assigned by that selector. Non valid forms apparently are simply ignored just like any invalid selector would be.

Interesting, sort of makes sense. It's easy to see the `before` pseudo element as `
I guess it could be imagined as `
LoremIpsum
dolor sit amet
`... — Godwin, Jul 04 '13 at 17:02
See this for a similar concept, but in reverse: [Can I target an :after pseudo-element with a sibling combinator?](http://stackoverflow.com/questions/7735267/can-i-target-an-after-pseudo-element-with-a-sibling-combinator) — BoltClock, Jul 04 '13 at 17:08
Yes & no. It's more complicated, for the `background-color` is like `
...
etc...
`, but does not recognize those real `

score 2 · Answer 2 · answered Jul 04 '13 at 15:43

2

I think you would be better off with:

ul > li:first-child

:first-line is only useful for text elements

answered Jul 04 '13 at 15:43

Fiona - myaccessible.website

14,481
16
82
117

2

This would only style the first element, not every element on the first line! – Godwin Jul 04 '13 at 15:46
1

In that case I think you'll need a JavaScript solution of some form, I don't think CSS is going to help you here – Fiona - myaccessible.website Jul 04 '13 at 15:48

Edorka · Answer 3 · 2013-07-04T16:12:24.407

The only option to make a class apart for the second line is adding through Javascript a concrete className to them and setting the background for them. To get the current line you should iterate the elements and compare it's distance to the list top and it's previous siblings. I made a jQuery example so you can get the idea: 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);
    });
});

and the css:

ul li.line-2{
    background-color: #FFF;
}

I didn't fork the fiddle, now it's ok – Edorka Jul 04 '13 at 16:15 — Edorka, Jul 04 '13 at 16:15

score 0 · Answer 4 · answered Jul 04 '13 at 16:15

Pretty sure the :first-line should be applied to the element itself that contains the text (rather than the parent, as you have).

ul > li:first-line { /*style*/ }

Or if your list items contain

tags or something else like that...

ul > li p:first-line { /*style*/ }

Styling 'first-line' inner elements

4 Answers4

Here's "Why" What You Want to Do Cannot Be Done