Deep dive into Pseudo Class Selectors

Deep dive into Pseudo Class Selectors

Table of contents

No heading

No headings in the article.

Pseudo Class Selectors:

We have already walked through the CSS selectors and pseudo elements (::before and ::after) in the last article. In today's article we will learn about basics of CSS. Pseudo Selectors is one of them.

Pseudo Class selectors are the CSS selectors with colon preceding them. They are the selectors which select elements that are in particular state link navigating to a link or hovering on the link or a mouse event. They tend to act as if you have applied a class to some part of the document.

CSS1.jpg

Syntax:

:pseudo-class-name

Link related Pseudo Selectors:

:link -> This pseudo class selector selects all the anchor elements which has a link defined via hyperlink reference which are not visited yet.

Syntax:

a:link {
    color: blue;
}
<a href="www.google.com">Go to Google</a><!-- will be matched -->
<a href="https://css-tricks.com">CSS-Tricks</a>
<!-- invalid HTML, but will still match -->
<a href>CSS-Tricks</a></code>
<!-- will not be matched -->
<a>CSS-Tricks</a>

:visited -> The :visited pseudo-class selector can change some of the styling on an anchor link () element if the user’s browser has already visited the link. It’s meant to help users distinguish the difference between links they have and haven’t visited.

Syntax:

a:visited {
      color: red;
}

:hover – The :hover pseudo class in CSS selects elements when the mouse cursor is current over them. It’s commonly associated with link () elements.

Syntax:

a: hover {
    color: white;
    background-color: black;
    text-decoration: underline overline;
}
<a href="https://google.com">Go to Google</a>

:active –> Selects the link while it is being activated (being clicked on or otherwise activated). For example, for the “pressed” state of a button-style link or to make all links feel more button-like.

Syntax:

a: active {
    color: purple;
}

Input related Pseudo class selectors:

:focus -> :focus selects elements that are current focus of the keyboard. This is not limited to links, you can use it for inputs and text areas as well.

Syntax:

element-name:focus { style-properties }

:enabled -> Selects all the inputs that are in default state of enabled and ready to be used.

Syntax:

element-name:enabled { style-properties }

:disabled -> Selects inputs that have the disabled state. A lot of browsers will make the input a faded out grey, you can control with this selector.

Syntax:

element-name:disabled { style-properties }

CSS:

a:link {
    color: blue;
}
a:visted {
    color: red;
}
a:hover {
    background-color: yellow;
    color: black;
}
#email:disabled {
    background-color: dimgrey;
    color: linen;
    opacity: 1;
}
.input:focus {
    background-color: bisque;
    color: black;
}
.button {
    border-radius: 10px;
    text-align: center;
}

HTML:

<body>
  <h1>Learning the link related pseudo class selectors</h1>
  <a href="https://www.google.com/">Go to Google</a>
  <br><br>
  <form action="">
      <label for="Name">1) Name:    </label><br><br>
      <input type="text" class="input"/><br><br>
      <label for="Email address">2) Email Address:  </label><br><br>
      <input type="email" id="email"><br><br>
      <label for="Comments">3) Comments:    </label><br><br>
      <input type="textarea" class="input"/><br><br>
      <button type="submit" class="button">Submit</button>
  </form>
</body>

Position based Pseudo class selectors:

:root -> The :root selector allows you to target the highest-level “parent” element in the DOM, or document tree, meaning it is used to style content based on its relationship with parent and sibling content.

Syntax:

element-name:root { style-properties };

:first-child -> The :first-child selector allows you to target the first element immediately inside another element, meaning it is used to style content based on its relationship with parent and sibling content.

Syntax:

element-name:first-child { style-properties }
<article>
  <p>First paragraph...</p>
  <p>Lorem ipsum...</p>
  <p>Dolor sit amet...</p>
  <p>Consectetur adipisicing...</p>
</article>
p:first-child {
  font-size: 2px;
}

:last-child -> The :last-child selector allows you to target the last element directly inside its containing element, meaning it is used to style content based on its relationship with parent and sibling content.

Syntax:

element-name:last-child { style-properties }
<article>
  <p>Lorem ipsum...</p>
  <p>Dolor sit amet...</p>
  <p>Consectetur adipisicing...</p>
  <p>Last paragraph...</p>
</article>
p:last-child {
  font-size: 1px;
}

:nth-child -> The :nth-child selector allows you to select one or more elements based on their source order, according to a formula.

Syntax:

element-name:nth-child { style-properties }
/* Select the first list item */
li:nth-child(1) { }

/* Select the 5th list item */
li:nth-child(5) { }

/* Select every other list item starting with first */
li:nth-child(odd) { }

/* Select every 3rd list item starting with first */
li:nth-child(3n - 2) { }

/* Select every 3rd list item starting with 2nd */
li:nth-child(3n - 1) { }

/* Select every 3rd child item, as long as it has class "el" */
.el:nth-child(3n) { }
<section class="grid">
  <article class="module">One</article>
  <article class="module">Two</article>
  <article class="module">Three</article>
  <article class="module">Four</article>
  <article class="module">Five</article>
</section>
.module:nth-child(4n) {
  margin-right: 0;
}

nth-of-type -> Selects nth-child of same level but different types. For example, if you have div and inside of it you have so many paragraphs and images. You want to select all the old images :nth-child wont work here. You can use div img:nth-of-type(odd). Particularly useful when you are writing definition lists with alternating dl and dt tags.

Syntax:

element-name:nth-of-type { style-properties }
<ul>
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
  <li>Fourth Item</li>
  <li>Fifth Item</li>
</ul>
li {
  background: slategrey;
}
/* select alternating items starting with the second item */
li:nth-of-type(2n) {
  background: lightslategrey;
}

:first-of-type – The :first-of-type selector in CSS allows you to target the first occurence of an element within its container. So if you have two divs, each had within it a paragraph, image, paragraph, image. Then div img:first-of-type would select the first image inside the first div and the first image inside the second div.

Syntax:

element-name:first-of-type { style-properties }
<article>
  <h1>A Title</h1>
  <p>Paragraph 1.</p>
  <p>Paragraph 2.</p>
  <p>Paragraph 3.</p>
</article>
p:first-of-type {
  font-size: 1.25em;
}

:last-of-type – Same as above, only would select the last image inside the first div and the last image inside the second div.

Syntax:

element-name:last-of-type() { style-properties }

:nth-last-of-type() – The :last-of-type selector allows you to target the last occurence of an element within its container.

Syntax:

element-name:nth-last-of-type() { style-properties }
<article>
<h1>A Title</h1>
<p>Paragraph 1.</p>
<p>Paragraph 2.</p>
<p>Paragraph 3.</p>
<img src="...">
</article>
p:last-of-type {
  font-size: 0.75em;
}

:nth-last-child() – Works like :nth-child, but it counts up from the bottom instead of the top.

Syntax:

element-name:nth-last-child() { style-properties }

:only-of-type – Selects only if the element is the only one of its kind within the current parent.

Syntax:

element-name:only-of-type() { style-properties }

To deep drive more into these pseudo selectors:

Resource: MDN DOCS CSS Tricks