Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Styling 'first-line' inner elements

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'.

like image 276
Godwin Avatar asked Jul 04 '13 15:07

Godwin


People also ask

How do you style the first line in CSS?

CSS | ::first-line Selector The ::first-line selector in CSS is used to apply style to the first line of a block-level element. The length of the first line depends on many factors, including the width of the element, the width of the document, font-size of the text, etc. Example: html.

How can use style the first line of a P tag?

The ::first-line selector is used to add a style to the first line of the specified selector. Note: The following properties can be used with ::first-line: font properties. color properties.

How would you define first line pseudo-element CSS?

A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, ::first-line can be used to change the font of the first line of a paragraph. Note: In contrast to pseudo-elements, pseudo-classes can be used to style an element based on its state.

Is the first line a pseudo-element?

::first-line. ::first-line is a pseudo-element used to select the first formatted line in a block-level element (such as a paragraph <p> ). As with all pseudo-elements, it does not match any real HTML element.


2 Answers

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.

like image 167
ScottS Avatar answered Sep 16 '22 12:09

ScottS


I think you would be better off with:

ul > li:first-child

:first-line is only useful for text elements

like image 23
Fiona - myaccessible.website Avatar answered Sep 19 '22 12:09

Fiona - myaccessible.website