Styling the "first lines" of internal elements

Question

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

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

I overlooked the way I define style, is this overseeing the CSS implementation or the intentional CSS specification? If this is the last, is there a good justification for this?

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

Edit:
Keep in mind that it’s rather difficult to say that currently it is not possible to achieve using CSS alone, but from the point of view of research and for posterity I wonder why this is so. If you read the W3C CSS specification on the firstline pseudo- firstline , there seems to be no mention of internal elements. Thanks to everyone who is trying to provide alternative solutions, but if there really is no CSS solution, the question is “why,” not “how” or “maybe.”

Answer 1

Here, the “Why” that you want to do cannot be done.

selector 3 spec updated a bit. The following is taken from this.

“Why” is because :first-letter is a pseudo-element, that is, a “fake” or “false” element. It creates a “fictional tag sequence” that is not recognized in relation to other real elements. So your ...

 ul:first-line > li 

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

 ul:before + li 

... where the combinator (whether it be > or + ) looks only at the "element" and not at the "pseudo-element" for selection. The second line does not target the "first" li ul , which follows the :before pseudo-element. If it worked at all, it would target the li that follows ul in the html sequence (which, of course, will never be in a valid html layout).

However, a selector line similar to the previous one will not work in any case , since in fact the form of the specified lines is incorrect, which confirms the statement in the specifications , which says:

Only one pseudo-element can be displayed on the selector, and if it is present it should appear after a sequence of simple selectors that represent the subjects of the selector.

In other words, the pseudo-element can be placed dead last in the selector sequence, since it must be the target of the properties assigned by this selector. Invalid forms seem to be simply ignored just like any invalid selector.

Answer 2

I think you will be better off:

 ul > li:first-child 

:first-line is only useful for text elements

Answer 3

The only way to make a class for the second line is to add the specific class name to them through Javascript and set the background for them. To get the current row, you have to iterate over the elements and compare the distance to the top of the list and previous siblings. I made a jQuery example so you can understand: 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 css:

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

Answer 4

Pretty sure that :first-line should be applied to the element itself, which contains the text (and not 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*/ } 

Answer 5

I have a navigation menu. And it has a lot of lines. I created a separator for the menu item. How to remove a menu item separator in its first or nth line. Thanks!