Pseudo-classes and elements

 Pseudo class definition

 Pseudo-classes are a type of selector that are used to select elements in a certain state, such as when they are the first element of this type, or when the mouse pointer is hovering over the element. They behave as if you applied a class to a certain part of your document, helping you reduce redundant classes in your markup text, making your code more flexible and easier to maintain.

 Pseudo element definition

 Pseudo-elements behave in a similar way, but behave as if you were adding entirely new HTML elements to the markup text, rather than applying classes to existing elements. Pseudo-elements begin with a double colon ::.

Summarize:

The pseudo-class is ':', which is the selector

for elements that are '::' like elements

Combine the two:

p:first-child::first-line

pseudo class

Selector	describe
:active	Matches when the user activates (eg clicks on) the element.
:any-link	:linkMatches the sum state of a link :visited.
:blank	Matches an <input> element with an empty input value .
:checked	Matches a radio or checkbox that is checked.
:current (en-US)	Matches the element being displayed, or its parent element.
:default	Matches one or more default UI elements in a group of similar elements.
:dir	Matches an element based on its directionality (the value of the HTML dir attribute or the CSS direction property).
:disabled	Matches UI elements that are in the closed state
:empty	Matches an element that has no children except for possible whitespace.
:enabled	Matches UI elements that are in the on state.
:first	Matches the first page of paged media .
:first-child	Matches the first element among sibling elements.
:first-of-type	Matches the first element of a certain type among sibling elements.
:focus	Matches when an element has focus.
:focus-visible	Matches when the element has focus and the focus is visible to the user.
:focus-within	Matches the element that has focus, and the element whose descendants have focus.
:future (en-US)	Matches the element after the current element.
:hover	Matches when the user hovers over an element.
:indeterminate	A UI element that matches an unsettled value, usually a checkbox .
:in-range	Match elements with a range, matching when the value is within the range.
:invalid	Matches <input>elements such as that are in an unavailable state.
:lang	Matches elements based on language (the value of the HTML lang attribute).
:last-child	Matches the last element among sibling elements.
:last-of-type	Matches the last element of a certain type among sibling elements.
:left	In paged media (en-US) , matches the left-hand page.
:link	Matches links that have not been visited.
:local-link (en-US)	Matches links pointing to pages on the same website as the current document.
:is()	Matches any selector in the passed selector list.
:not	Matches objects not matched by the selector passed to itself as value.
:nth-child	Match elements in a list of sibling elements—sibling elements are matched in the form of an+b (for example, 2n+1 matches elements 1, 3, 5, 7, etc. That is, all odd numbers).
:nth-of-type	Matches a list of sibling elements of a certain type (eg, <p>element) - sibling elements are matched according to a formula of the form an+b (eg 2n+1 matches elements 1, 3, 5, 7, etc. ie all odd numbers).
:nth-last-child	Matches a list of sibling elements, counting backwards. The sibling elements are matched according to the formula in the form of an+b (for example, 2n+1 matches the last element in order, then the first two, then the first two, and so on. All odd numbers from the back to the front ) .
:nth-last-of-type	Matches a list of sibling elements of a certain type (eg, <p>element), counting backwards. The sibling elements are matched according to the formula in the form of an+b (for example, 2n+1 matches the last element in order, then the first two, then the first two, and so on. All odd numbers from the back to the front ) .
:only-child	Matches an element that has no siblings.
:only-of-type	Matches the only element of a type among sibling elements.
:optional	Matches form elements that are not required.
:out-of-range	Match elements by range, and match when the value is not in the range.
:past (en-US)	Matches the element preceding the current element.
:placeholder-shown	Matches input elements that display placeholder text.
:playing	Matches "playing" elements that represent audio, video, or similar resources that can be "played" or "paused".
:paused	Matches a "pausing" element representing an audio, video, or similar resource that can "play" or "pause".
:read-only	Matches elements that cannot be changed by the user.
:read-write	Matches elements that can be changed by the user.
:required	Matches a required form element.
:right	In paged media (en-US) , matches the right-hand page.
:root	Matches the root element of the document.
:scope	Matches any element that is a reference point element.
:valid	Matches <input>elements such as elements that are in the available state.
:target	An element that matches the current URL target (for example, if it has an element that matches the current URL segment ).
:visited	Matches visited links.

 pseudo element

pseudo element

Selector	describe
::after	Matches a styleable element that appears after the actual content of the original element.
::before	Matches a styleable element that appears before the actual content of the original element.
::first-letter	Matches the first letter of an element.
::first-line	Matches the first line of an element containing this pseudo-element.
::grammar-error	Matches the portion of the document that contains syntax errors marked by the browser.
::selection	Matches the selected portion of the document.
::spelling-error	Matches the portion of the document that contains misspelled browser tags.