Css first letter last letter

CSS Pseudo-elements

A CSS pseudo-element is used to style specified parts of an element.

For example, it can be used to:

• Style the first letter, or line, of an element
• Insert content before, or after, the content of an element

Syntax

The syntax of pseudo-elements:

The ::first-line Pseudo-element

The ::first-line pseudo-element is used to add a special style to the first line of a text.

The following example formats the first line of the text in all

elements:

Example

Note: The ::first-line pseudo-element can only be applied to block-level elements.

The following properties apply to the ::first-line pseudo-element:

• font properties
• color properties
• background properties
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• clear

Notice the double colon notation — ::first-line versus :first-line

The double colon replaced the single-colon notation for pseudo-elements in CSS3. This was an attempt from W3C to distinguish between pseudo-classes and pseudo-elements.

The single-colon syntax was used for both pseudo-classes and pseudo-elements in CSS2 and CSS1.

For backward compatibility, the single-colon syntax is acceptable for CSS2 and CSS1 pseudo-elements.

The ::first-letter Pseudo-element

The ::first-letter pseudo-element is used to add a special style to the first letter of a text.

The following example formats the first letter of the text in all

elements:

Example

Note: The ::first-letter pseudo-element can only be applied to block-level elements.

The following properties apply to the ::first-letter pseudo- element:

• font properties
• color properties
• background properties
• margin properties
• padding properties
• border properties
• text-decoration
• vertical-align (only if «float» is «none»)
• text-transform
• line-height
• float
• clear

Pseudo-elements and HTML Classes

Pseudo-elements can be combined with HTML classes:

Example

The example above will display the first letter of paragraphs with in red and in a larger size.

Multiple Pseudo-elements

Several pseudo-elements can also be combined.

In the following example, the first letter of a paragraph will be red, in an xx-large font size. The rest of the first line will be blue, and in small-caps. The rest of the paragraph will be the default font size and color:

Example

p::first-letter <
color: #ff0000;
font-size: xx-large;
>

p::first-line color: #0000ff;
font-variant: small-caps;
>

CSS — The ::before Pseudo-element

The ::before pseudo-element can be used to insert some content before the content of an element.

The following example inserts an image before the content of each element:

Example

CSS — The ::after Pseudo-element

The ::after pseudo-element can be used to insert some content after the content of an element.

The following example inserts an image after the content of each element:

Example

CSS — The ::marker Pseudo-element

The ::marker pseudo-element selects the markers of list items.

The following example styles the markers of list items:

Example

CSS — The ::selection Pseudo-element

The ::selection pseudo-element matches the portion of an element that is selected by a user.

The following CSS properties can be applied to ::selection : color , background , cursor , and outline .

The following example makes the selected text red on a yellow background:

Example

All CSS Pseudo Elements

Selector	Example	Example description
::after	p::after	Insert something after the content of each element
::before	p::before	Insert something before the content of each element
::first-letter	p::first-letter	Selects the first letter of each element
::first-line	p::first-line	Selects the first line of each element
::marker	::marker	Selects the markers of list items
::selection	p::selection	Selects the portion of an element that is selected by a user

All CSS Pseudo Classes

Selector	Example	Example description
:active	a:active	Selects the active link
:checked	input:checked	Selects every checked element
:disabled	input:disabled	Selects every disabled element
:empty	p:empty	Selects every element that has no children
:enabled	input:enabled	Selects every enabled element
:first-child	p:first-child	Selects every elements that is the first child of its parent
:first-of-type	p:first-of-type	Selects every element that is the first element of its parent
:focus	input:focus	Selects the element that has focus
:hover	a:hover	Selects links on mouse over
:in-range	input:in-range	Selects elements with a value within a specified range
:invalid	input:invalid	Selects all elements with an invalid value
:lang(language)	p:lang(it)	Selects every element with a lang attribute value starting with «it»
:last-child	p:last-child	Selects every elements that is the last child of its parent
:last-of-type	p:last-of-type	Selects every element that is the last element of its parent
:link	a:link	Selects all unvisited links
:not(selector)	:not(p)	Selects every element that is not a element
:nth-child(n)	p:nth-child(2)	Selects every element that is the second child of its parent
:nth-last-child(n)	p:nth-last-child(2)	Selects every element that is the second child of its parent, counting from the last child
:nth-last-of-type(n)	p:nth-last-of-type(2)	Selects every element that is the second element of its parent, counting from the last child
:nth-of-type(n)	p:nth-of-type(2)	Selects every element that is the second element of its parent
:only-of-type	p:only-of-type	Selects every element that is the only element of its parent
:only-child	p:only-child	Selects every element that is the only child of its parent
:optional	input:optional	Selects elements with no «required» attribute
:out-of-range	input:out-of-range	Selects elements with a value outside a specified range
:read-only	input:read-only	Selects elements with a «readonly» attribute specified
:read-write	input:read-write	Selects elements with no «readonly» attribute
:required	input:required	Selects elements with a «required» attribute specified
:root	root	Selects the document’s root element
:target	#news:target	Selects the current active #news element (clicked on a URL containing that anchor name)
:valid	input:valid	Selects all elements with a valid value
:visited	a:visited	Selects all visited links

Источник

A Call for ::nth-everything

With CSS3, we have positional pseudo class selectors to help us select specific elements when there are no other distinguishing characteristics other than where it is in the DOM in relation to it’s siblings.

:first-child :last-child :nth-child :nth-last-child :first-of-type :last-of-type :nth-of-type :nth-last-of-type :only-child :only-of-type

That’s a great start, but it really would be useful if we could extend the whole “:nth” concept to these typographic selectors. Let me convince you.

Please note that most of the code below is not valid. It’s example code. Like “wouldn’t it be cool if” code.

::nth-line() / ::last-line / ::nth-last-line()

We already have ::first-line , so to complete the set let’s add ::nth-line() , ::last-line , and ::nth-last-line() . With these, we could select the first two lines of a poem to highlight.

article.poem p:first-child::nth-line(-n+2)

Or perhaps we could fade out the end of a passage.

article.poem p:last-child::nth-last-line(3) < color: hsla(26, 5%, 25%, 1); font-size: 70%; >article.poem p:last-child::nth-last-line(2) < color: hsla(26, 5%, 50%, 1); font-size: 60%; >article.poem p:last-child::nth-last-line(1)

If we were allowed to use generated content on these line pseudo elements, we could accomplish something like line numbering without having to resort to intrusive markup.

Relevant article by Adam Prescott.

::nth-word() / ::first-word / ::last-word / ::nth-last-word()

We currently don’t have any word-based pseudo elements. We do have word-spacing though, which is notable. One use case is similar to using ::first-letter for drop caps, only doing a whole word.

Also similar to the “fade out” of lines above, we could fade out a passage word-by-word using ::nth-last-word(n) .

::nth-letter() / ::last-letter() / ::nth-last-letter()

We already have ::first-letter , which sees pretty decent usage, so why not complete the set? Of all of these “new” selectors, ::nth-letter is likely the most useful. For instance, Lettering.js wraps letters in s for us so that we can select individual letters. This would be entirely unnecessary with ::nth-letter . Take this example:

h1.fancy::nth-letter(n) < display: inline-block; padding: 20px 10px; >h1.fancy::nth-letter(odd) < transform: skewY(15deg); background: url(light-red-pattern.png); >h1.fancy::nth-letter(even) < transform: skewY(-15deg); background: url(dark-red-pattern.png); >h1.fancy::nth-word(n) < margin-right: 20px; >h1.fancy::last-word

Check out all the examples at Lettering.js — all of those are good examples of the need for this. Another word/letter combination example is a formal “letter”, like:

Dear Emily, yadda yadda yadda. Love, Chris.

Perhaps this “letter” is generated by dynamic content from a database, but we want to ensure the proper capitalization and style of the opening and closing lines.

.letter p:first-child::nth-word(-n+2)::nth-letter(1), .letter p:last-child:nth-word(-n+2):nth-letter(1)

:first-child :first-of-type :only-child :last-child :last-of-type :only-of-type :nth-child :nth-of-type :nth-last-child :nth-last-of-type ::first-letter ::first-line ::first-word ::last-letter ::last-line ::last-word ::nth-letter ::nth-line ::nth-word ::nth-last-letter ::nth-last-line ::nth-last-word 

Again, just wishful thinking. If there is anyone I can put this in front of that can do something about it, I will. And I’ll also keep this updated with the feedback on it, positive or negative. For the record, this isn’t a new request. Anne van Kesteren called for it in 2003.

Источник