Useful Tips From Experts For CSS Pseudo Selectors

CSS Pseudo Selectors

Pseudo class selectors are CSS selectors used to define a special state of an element or display elements in a different way. It allows us to apply a special style to any element in context of the actions being performed on it. All the different selectors that are used commonly are described in the following sections.
 
Content selectors 
::after
::before

  • Displays content text or img after and before the defined element/tag (Note: It is not working for input tags).
  • It contains 'Content' property to display any text or image.

:empty

  • It counts any element as empty if it does not have any text or child tags.

:not()

  • It is negation class selector. We can ignore some tags by using :not selector.
  • For example:  :not(.class-name) { /* code */ }

 
 
=> Child selectors
:first-child

  • It will target the tag only if it is the first child of its parent.

:first-of-type

  • It will target the first element of its parent, of particular type.

:last-child

  • It will target the tag only if it is the last child of its parent.

:last-of-type

  • It will target the last element of its parent, of particular type.

:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type

  • These elements are used to find the specific child of its parent. 
  • For example: 
<ul>
      <li>First list item</li>
      <li>Second list item</li>
      <li>Third list item</li>
      <li>Fourth list item</li>
<li> last list item</li>
    </ul>
    li:first-child {
      color: deepPink;
    }
    li:nth-child(3) {
      background-color: red;
    }
    li:last-child {
      text-decoration: underline;
    }

 

CSS Pseudo Selectors

::placeholder

  • It represents the text in input/textarea fields and provides a hint to the user about the data to be filled in the form element.
  •  For example: 
::placeholder {
      color: #0c496d;
      font-size: 14px;
    }
   ::-moz-placeholder {
      color: #0c496d;
      font-size: 14px;
   }

 

CSS Pseudo Selectors

:disabled
:enabled

  • It accepts or rejects a user interaction on a form control.
  • It is used for button, select, input, textarea... 
  • For example: 

HTML

<input type="checkbox" id="checkbox-1" disabled><label for="checkbox-1">First Choice (disabled)</label> <br>
        <input type="checkbox" id="checkbox-2"><label for="checkbox-2">Second Choice</label>

 

CSS

 input[type="checkbox"]:disabled + label{
              text-decoration: line-through;
               cursor: not-allowed;
    color: grey;
        }
   

:checked

  • It is used to select and style checkbox and radio-button that are checked.
  • For example: 
<input type="checkbox" name="checks" id="box-1" checked> <label for="box-1">Initially checked.</label> <br/>
<input type="checkbox" name="checks" id="box-2"><label for="box-2">Not Checked</label>

 

CSS Pseudo Selectors

:read-only

  • It selects any input type and textarea that is not editable.

:read-write

  • It selects any input type and textarea that is editable.

:required

  • Required is used to select form elements that have the required attribute set.

:optional

  • Optional is used to select form elements that are optional.

=> Event selectors

  • It specifies an element based on a specific state and is used to apply styles to an element when it matches that specified state. 
  • These pseudo elements are used to style link elements and define different behaviors like: active, hover,  focus, visited.

:active 

  • This pseudo-class is a dynamic class which applies when an element is being activated by the user. It is used to style an element when it’s active.
  • For example: 
    p:active { background-color: #AAA; }

 

:blank

  • It is a CSS pseudo-class selector used to select pages of a printed document, such as a book, that are empty as a result of a forced page break.

:focus

  • It is used for elements that accept keyboard events or other user inputs or receive focus.
  • For example:
a:focus {
    outline: 0;
    background-color: black;
}

 

:hover

  • It is used to select and style an element when mouse is moved over them.
  • It is also used to show secondary content when certain elements hover.
  • Example1, It is very common to use hovering over a list item in a navigation menu to open a submenu of that item. 
  • Example2 
 a:hover {
            background-color: black;
            color: white;
    }

 

:target

  • It is used to style an element that is the target of an internal link in a document.      
  • For example: 
HTML
    <a href="#article-demo">Go To Demo</a>
    <section id="article-demo">
        <!-- content here -->
    </section>
CSS
    :target {
    border: 2px solid #D4D4D4;
    background-color: #e5eecc;
}

 

:link

  • It is used to select unvisited links.
  • For example: 
HTML

<a href="#id">Internal Link</a>
<a href="http://addwebsolution.com">External Link</a>
<a>No href attribute</a>

CSS

a { color: pink; padding-bottom: 10px; }
a:link {    Color: white; }

 

CSS Pseudo Selectors

:visited

  • It is used to select and style visited links in a page. 
  • For example: 
     a:visited { color: #113E3E; }

 

=> Others selectors
 
::selection

  • It represents a portion of the document that is highlighted by the user or selected area.
  • Properties used for ::selection are color, background-color, and text-shadow.
  • For example: 
::selection {
    background-color: #FF3334;
    color: white;
}

 

CSS Pseudo Selectors
  • Note: Firefox supports it prefixed with the -moz- prefix, in the form: ::-moz-selection.         

:default

  • It is used to select and style one or more UI elements that are default among a set of similar elements.

:dir()

  • Directionality of an element can be specified using the dir attribute. The directionality can be set to either ltr (left-to-right) or rtl (right-to-left).

:in-range

  • This selects all elements with a value that is within a specified range.

:out-of-range

  • This selector selects all elements with a value that is outside a specified range.

:valid

  • Selector selects form elements with a value that validates according to the element's settings.

:invalid

  • This selector selects form elements with a value that does not validate according to the element's settings.

:lang()

  • This selector is used to select elements with a lang attribute with the specified value.

:fullscreen

  • This selector is used to select and style an element that is being displayed in full-screen mode.

:root

  • This selector is used to select the element that represents the root of the document.
  • For example: 
:root { background: grey; }
    html { background: blue; }

 

Hope this helped you to get most out of the system. Feel free to share your reviews or need assistance for Web Design Services then get in touch with us. :)