CSS Pseudo-Elements

::Selection

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

::selection {
     color: red; 
     background: yellow;
}

::first-line

Is used to add a special style to the first line of a text.

 p::first-line { 
     background-color: #fef;
     font-size: 23px;
 }

::marker

Selects maker box of a list item, contains bullet or number: works on elements or pseudo-element set to display: list-item;, such as ul ol and summary elements.

::marker {
    color: #a90baf;
    font-size: 1.8em;
    white-space: wrap;
}

CSS Pseudo-Classes

:focus

Select and style an input field when it gets focus.

input[type=text]:focus {
    width: 250px;
}

:disabled

The selector matches every disabled element (mostly used on form elements). Must include disabled attribute in HTML code.

CSS Code

   input[type="text"]:disabled {
        background: #ddd;
   }

HTML Code

  <label for="email">Email</label>
  <input type="email" disabled>

:link

Select and style unvisited links.

    a:link { 
       background-color: yellow;
    }

:required

Selects form elements which are required. Form elements with a required attribute are defined as required.

    input:required { 
       background-color: yellow;
    }

HTML Code

 <label for="name">Name</label>
 <input type="text" required>

:default

Selects form elements that are the default in a group of related elements. Its a must that you include the checked attribute.

CSS code

input[type="checkbox"]:default {
         color: #fdc;
}

HTML code

 <label for="check">Loki</label>
  <input type="checkbox" default>
  <label for="check">Thanos</label>
  <input type="checkbox">
  <label for="check">Ultron</label>
  <input type="checkbox">

:enabled

Opposite of the :disabled pseudo-class. Represents any enabled elements (by clicks, selected on, typed into or accepts focus). Must include enabled attribute in HTML code.

CSS Code

 input[type="email"]:enabled {
         color: blue;
         font-size: 25px;
}

HTML Code

 <label for="name">Name</label>
  <input type="text">
  <label for="password">Password</label>
  <input type="password">
  <label for="email">Email</label>
  <input type="email" enabled>

:checked

Matches every checked <input> element (only for radio buttons and checkboxes) and <option> element.

CSS Code

  input:checked {
       color: blue;
       height: 50px;
       background-color: #fed;
  }

HTML Code

<label for="check">Iron Man</label>
  <input type="checkbox" checked>
  <label for="check">Batman</label>
  <input type="checkbox">
  <label for="check">Ant Man</label>
  <input type="checkbox">

:read-only

Select and style only if the input element is "readonly": Form elements with a "readonly" attribute are defined as "readonly" .

CSS Code

input:read-only { 
    background-color: yellow;
}

HTML Code

  <input type="password" readonly>

CSS Properties

Font-Variant

The font-variant property specifies whether or not a text should be displayed in a small-caps font.

p.small {
    font-variant: small-caps;
}

Word-Break

Break words between any two letters.

p {
    word-break: 10px;
}

White-Space

The white-space property specifies how white-space inside an element is handled.

p {
    white-space: wrap;
}

Outline

An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".

p {
    outline: #0f0 dotted thick;
}

Direction

The direction property specifies the text direction/writing direction.

div {
    direction: rtl;
}

Column

Specify the width and number of columns. Responsive on all mobiles and no need for Media Queries! Specify the width, style and color of the rule between columns.

div {
  column-rule: 4px outset #0c0b0c;
  columns: 10px 5;
  column-gap: 10px;
}

Quotes

Specify the quotation marks for quotations.

q {
    quotes: "«" "»";
}

Conclusion

It's a wrap! Its amazing to see how awesome CSS can be and that it can do a lot of things.

I hope you enjoyed this article and that you find it helpful.

Find me on Twitter