Looking for an Index of CSS Pseudo-Classes, Elements and Rules? Read on…

 

Notes: Both pseudo-elements and pseudo-classes are specified at the end of the selector and then any CSS rules and styling declarations follow in curly brackets {} as per any other element.

 

:link

[su_accordion][su_spoiler title=”:link (Click or tap to expand)” open=”no” style=”fancy” icon=”chevron” anchor=”” class=””]

By default browsers will display un-visited links underlined and in blue, and links which have been visited in a different colour. The :link pseudo-class lets you set the styling for links which have not yet been visited.

EXAMPLE CSS:

a:link { color: red; text-decoration: underline;}

Notes: As with other elements, any CSS styling can be applied to a link element using the :link pseudo-class selector. When using pseudo-classes, they should be declared in the order: :link, :visited, :hover, :focus, :active.

[/su_spoiler]

 

:visited

[su_accordion][su_spoiler title=”:visited (Click or tap to expand)” open=”no” style=”fancy” icon=”chevron” anchor=”” class=””]

By default browsers will display un-visited links underlined and in blue, and links which have been visited in a different colour. The :visited pseudo-class lets you set the styling for links which have already been visited by the user.

EXAMPLE CSS:

a:visited { color: green; text-decoration: strikethrough;}

Notes: As with other elements, any CSS styling can be applied to a link element using the :visited pseudo-class selector. When using pseudo-classes, they should be declared in the order: :link, :visited, :hover, :focus, :active.

[/su_spoiler]

 

:hover

[su_accordion][su_spoiler title=”:hover (Click or tap to expand)” open=”no” style=”fancy” icon=”chevron” anchor=”” class=””]

The three pseudo-classes of :hover, :active, and :focus allow you to style elements according to how a user interacts with them. The :hover pseudo-class is used to alter the styling of an element when the user hovers over it with their mouse cursor or other pointing device.

EXAMPLE CSS:

a:link { color: red; text-decoration: underline;}

a:hover { color: orange; text-decoration: none;}

Notes: As with other elements, any CSS styling can be applied to an element using the :hover pseudo-class selector. When using pseudo-classes, they should be declared in the order: :link, :visited, :hover, :focus, :active.

[/su_spoiler]

 

:focus

[su_accordion][su_spoiler title=”:focus (Click or tap to expand)” open=”no” style=”fancy” icon=”chevron” anchor=”” class=””]

The three pseudo-classes of :hover, :active, and :focus allow you to style elements according to how a user interacts with them. The :focus pseudo-class is used to alter the styling of an element when that element is deemed to be in focus. A browser will determine that an element is in focus when it detects that you are ready to interact with that element. An example of this is a form text input form; when your cursor moves into that text box; the browser detects that you are about to start writing something, so that element is said to be in focus.

EXAMPLE CSS:

input { padding: 5px; border 2px solid grey; color:#FFFFFF;}

input.textbox { color: azure;}

input.textbox:focus { color: cadetblue}

Notes: As with other elements, any CSS styling can be applied to an element using the :focus pseudo-class selector. When using pseudo-classes, they should be declared in the order: :link, :visited, :hover, :focus, :active.

[/su_spoiler]

 

:active

[su_accordion][su_spoiler title=”:active (Click or tap to expand)” open=”no” style=”fancy” icon=”chevron” anchor=”” class=””]

The three pseudo-classes of :hover, :active, and :focus allow you to style elements according to how a user interacts with them. The :active pseudo-class is used to alter the styling of an element when the user is clicking a link or pressing a button for example. The effect, or alteration to the styling, is instantaneous with the action being performed.

EXAMPLE CSS:

a:link { color: red; text-decoration: underline;}

a:active { color: yellow; text-decoration: blink;}

Notes: As with other elements, any CSS styling can be applied to an element using the :active pseudo-class selector. When using pseudo-classes, they should be declared in the order: :link, :visited, :hover, :focus, :active.

[/su_spoiler]

 

Currently reading: Index of CSS Pseudo-Classes, Elements and Rules.

Related: What is CSS?

Related: The Structure of CSS

 

:first-letter

[su_accordion][su_spoiler title=”:first-letter (Click or tap to expand)” open=”no” style=”fancy” icon=”chevron” anchor=”” class=””]

The :first-letter pseudo-element is used to style the first letter of an element, differently to the rest of that element.

EXAMPLE CSS:

p.article-intro:first-letter { font-size: 150%; color: blue;}

Notes: Pseudo-elements act like an additional element in the code. In this case, it is as if an extra element encloses the first letter of the paragraph and has its own styling, different to that of the remainder of the paragraph.

[/su_spoiler]

 

:first-line

[su_accordion][su_spoiler title=”:first-line (Click or tap to expand)” open=”no” style=”fancy” icon=”chevron” anchor=”” class=””]

The :first-line pseudo-element is used to style the first letter of an element, differently to the rest of that element.

EXAMPLE CSS:

p.article-intro:first-line { font-weight: bold; text-decoration: none; color: blue;}

Notes: Pseudo-elements act like an additional element in the code. In this case, it is as if an extra element encloses the entire first line of the paragraph and has its own styling, different to that of the remainder of the paragraph.

[/su_spoiler]

 

:first-child

[su_accordion][su_spoiler title=”:first-child (Click or tap to expand)” open=”no” style=”fancy” icon=”chevron” anchor=”” class=””]

The :first-child selector is used to select the specified selector (that element/class/id which sits infront of the :first-child rule) only if it is the first child of its parent element.

EXAMPLE CSS:

p:first-child { color: yellow;}

img:first-child { border: 5pt solid blue;}

Notes: The two rules above will only be applied to <p> and <img> elements respectively, if those elements are the first child of each of their respective parent/containing elements.

[/su_spoiler]

 

:before

[su_accordion][su_spoiler title=”:before (Click or tap to expand)” open=”no” style=”fancy” icon=”chevron” anchor=”” class=””]

The :before pseudo-element is used to insert some desired content, before the main content of a given element. This might typically be a small image file to group a number of similar elements together and signify their relationship.

EXAMPLE CSS:

h1.sports-headline:before {content:url(images/sports.png);}

Notes: Though it can be left empty and given a value content: “”, the content property must always be included in the :before declaration for the this pseudo-element to work. Quotation marks (“” or ‘’) are also omitted for any url declaration made inside a :before pseudo-element.

[/su_spoiler]

 

:after

[su_accordion][su_spoiler title=”:after (Click or tap to expand)” open=”no” style=”fancy” icon=”chevron” anchor=”” class=””]

The :after pseudo-element is used to insert some desired content, after the main content of a given element. This might typically be a small image file to group a number of similar elements together and signify their relationship.

EXAMPLE CSS:

h1.sports-headline:after {content:url(images/sports.png);}

Notes: Though it can be left empty and given a value content: “”, the content property must always be included in the :after declaration for the this pseudo-element to work. Quotation marks (“” or ‘’) are also omitted for any url declaration made inside a :after pseudo-element.

[/su_spoiler]

 

Currently reading: Index of CSS Pseudo-Classes, Elements and Rules.

Related: What is CSS?

Related: The Structure of CSS

 

@font-face

[su_accordion][su_spoiler title=”@font-face (Click or tap to expand)” open=”no” style=”fancy” icon=”chevron” anchor=”” class=””]

@font-face is used to specify and include a font which might not be installed on a user’s computer. Typically, a declaration will be made for the font-family name of the font to be used, along with an src file path to tell the users browser where to find the font. The users browser will then download and use a local copy of the specified font. Once the @font-face property has been used to load a specific font, follow on CSS rules can refer to the same font, using just the font-family property.

EXAMPLE CSS:

@font-face { font-family: ‘TWPScustom’; src: url(‘fonts/TWPScustom.eot’);}

p.custom-font { font-family: TWPScustom, Georgia, serif;}

Possible attributes: font-family; specifies the name of the font to be used, src; specifies the file path to locate the font file (often multiple file paths and font files need to be specified to gain consistent results across the different browsers), format; specifies the format that a font is provided in (eot, woff, ttf/otf, svg etc.).

[/su_spoiler]

 

@import rule

[su_accordion][su_spoiler title=”@import rule (Click or tap to expand)” open=”no” style=”fancy” icon=”chevron” anchor=”” class=””]

The @import rule is included in CSS stylesheets where additional stylesheets are to be imported and accessed. The @import rule is typically placed at the top of the CSS stylesheet.

EXAMPLE CSS:

@import url{“css/twps-tables.css”)

@import url{“css/twps-typography.css”)

body { width: 960px; color: white; background-image: url(“images/twps-icon.png”); background-attachment: fixed;}

h2 { background-color: #efefef;}

h4 { background-color: blue;}

Notes: Multiple stylesheets can be imported in the same way, using the @import rule. An alternative would be to add additional <link> elements to the <head> section of your HTML document, each linking to a different stylesheet.

[/su_spoiler]

 

!important

[su_accordion][su_spoiler title=”!important (Click or tap to expand)” open=”no” style=”fancy” icon=”chevron” anchor=”” class=””]

!important can be placed immediately after any CSS property value, to indicate that that value is more important than any value arising from another rule which might apply to the same element.

EXAMPLE CSS:

p { color: red !important;}

p.green { color: green;}

Notes: Even though the latter rule has greater specificity and would normally be the one applied to the <p> element, the !important rule overrides this to ensure that any <p> element which is given a class of “green”, is coloured green.

[/su_spoiler]

 

 

Learn More about CSS…

Currently reading: Index of CSS Pseudo-Classes, Elements and Rules.

Related: What is CSS?

Related: The Structure of CSS