elements `p::first-line { color: #ff0000; font-variant: small-caps; }` **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: `p::first-letter { color: #ff0000; font-size: xx-large; }` **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 CSS Classes Pseudo-elements can be combined with CSS classes: `p.intro::first-letter { color: #ff0000; font-size: 200%; }` The example above will display the first letter of paragraphs with class=”intro”, 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: `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 | | [::before](https://www.w3schools.com/cssref/sel_before.asp) | p::before | Insert something before the content of each
element | | [::first-letter](https://www.w3schools.com/cssref/sel_firstletter.asp) | p::first-letter | Selects the first letter of each
element | | [::first-line](https://www.w3schools.com/cssref/sel_firstline.asp) | p::first-line | Selects the first line of each
element | | [::marker](https://www.w3schools.com/cssref/sel_marker.asp) | ::marker | Selects the markers of list items | | [::selection](https://www.w3schools.com/cssref/sel_selection.asp) | p::selection | Selects the portion of an element that is selected by a user | ## ## All CSS Pseudo Classes | Selector | Example | Example description | | --- | --- | --- | | [:active](https://www.w3schools.com/cssref/sel_active.asp) | a:active | Selects the active link | | [:checked](https://www.w3schools.com/cssref/sel_checked.asp) | input:checked | Selects every checked element | | [:disabled](https://www.w3schools.com/cssref/sel_disabled.asp) | input:disabled | Selects every disabled element | | [:empty](https://www.w3schools.com/cssref/sel_empty.asp) | p:empty | Selects every
element that has no children | | [:enabled](https://www.w3schools.com/cssref/sel_enabled.asp) | input:enabled | Selects every enabled element | | [:first-child](https://www.w3schools.com/cssref/sel_firstchild.asp) | p:first-child | Selects every
elements that is the first child of its parent | | [:first-of-type](https://www.w3schools.com/cssref/sel_first-of-type.asp) | p:first-of-type | Selects every
element that is the first
element of its parent | | [:focus](https://www.w3schools.com/cssref/sel_focus.asp) | input:focus | Selects the element that has focus | | [:hover](https://www.w3schools.com/cssref/sel_hover.asp) | a:hover | Selects links on mouse over | | [:in-range](https://www.w3schools.com/cssref/sel_in-range.asp) | input:in-range | Selects elements with a value within a specified range | | [:invalid](https://www.w3schools.com/cssref/sel_invalid.asp) | input:invalid | Selects all elements with an invalid value | | [:lang(*language*)](https://www.w3schools.com/cssref/sel_lang.asp) | p:lang(it) | Selects every
element with a lang attribute value starting with “it” | | [:last-child](https://www.w3schools.com/cssref/sel_last-child.asp) | p:last-child | Selects every
elements that is the last child of its parent | | [:last-of-type](https://www.w3schools.com/cssref/sel_last-of-type.asp) | p:last-of-type | Selects every
element that is the last
element of its parent | | [:link](https://www.w3schools.com/cssref/sel_link.asp) | a:link | Selects all unvisited links | | [:not(selector)](https://www.w3schools.com/cssref/sel_not.asp) | :not(p) | Selects every element that is not a
element | | [:nth-child(n)](https://www.w3schools.com/cssref/sel_nth-child.asp) | p:nth-child(2) | Selects every
element that is the second child of its parent | | [:nth-last-child(n)](https://www.w3schools.com/cssref/sel_nth-last-child.asp) | 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)](https://www.w3schools.com/cssref/sel_nth-last-of-type.asp) | 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)](https://www.w3schools.com/cssref/sel_nth-of-type.asp) | p:nth-of-type(2) | Selects every
element that is the second
element of its parent | | [:only-of-type](https://www.w3schools.com/cssref/sel_only-of-type.asp) | p:only-of-type | Selects every
element that is the only
element of its parent | | [:only-child](https://www.w3schools.com/cssref/sel_only-child.asp) | p:only-child | Selects every
element that is the only child of its parent | | [:optional](https://www.w3schools.com/cssref/sel_optional.asp) | input:optional | Selects elements with no “required” attribute | | [:out-of-range](https://www.w3schools.com/cssref/sel_out-of-range.asp) | input:out-of-range | Selects elements with a value outside a specified range | | [:read-only](https://www.w3schools.com/cssref/sel_read-only.asp) | input:read-only | Selects elements with a “readonly” attribute specified | | [:read-write](https://www.w3schools.com/cssref/sel_read-write.asp) | input:read-write | Selects elements with no “readonly” attribute | | [:required](https://www.w3schools.com/cssref/sel_required.asp) | input:required | Selects elements with a “required” attribute specified | | [:root](https://www.w3schools.com/cssref/sel_root.asp) | root | Selects the document’s root element | | [:target](https://www.w3schools.com/cssref/sel_target.asp) | #news:target | Selects the current active #news element (clicked on a URL containing that anchor name) | | [:valid](https://www.w3schools.com/cssref/sel_valid.asp) | input:valid | Selects all elements with a valid value | | [:visited](https://www.w3schools.com/cssref/sel_visited.asp) | a:visited | Selects all visited links | ## [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-pseudo-element%2F&linkname=CSS%20Pseudo-element](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-pseudo-element%2F&linkname=CSS%20Pseudo-element)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-pseudo-element%2F&linkname=CSS%20Pseudo-element](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-pseudo-element%2F&linkname=CSS%20Pseudo-element)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-pseudo-element%2F&linkname=CSS%20Pseudo-element](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-pseudo-element%2F&linkname=CSS%20Pseudo-element)[https://www.addtoany.com/share](https://www.addtoany.com/share)