Pseudo Classes and Elements in CSS

Back to: CSS Tutorials for Beginners and Professionals

Pseudo Classes and Elements in CSS with Examples

In this article, I am going to discuss CSS Pseudo Classes and Elements with Examples. Please read our previous article where we discussed Display Property in CSS with Examples.

CSS Pseudo Classes

Pseudo-classes allow us to define a style for a special state of an element, like the hover or active state. Pseudo-classes are defined with a single colon and then the class name like hover or active.

Pseudo Classes List in CSS
  1. :active
  2. :any-link
  3. :autofill
  4. :blank
  5. :checked
  6. :current
  7. :default
  8. :defined
  9. :dir()
  10. :disabled
  11. :empty
  12. :enabled
  13. :first
  14. :first-child
  15. :first-of-type
  16. :fullscreen
  17. :future
  18. :focus
  19. :focus-visible
  20. :focus-within
  21. :has()
  22. :host
  23. :host()
  24. :host-context()
  25. :hover
  26. :indeterminate
  27. :in-range
  28. :invalid
  29. :is()
  30. :lang()
  31. :last-child
  32. :last-of-type
  33. :left
  34. :link
  35. :local-link
  36. :not()
  37. :nth-child()
  38. :nth-last-col()
  39. :nth-last-of-type()
  40. :nth-of-type()
  41. :only-child
  42. :only-of-type
  43. :optional
  44. :out-of-range
  45. :past
  46. :picture-in-picture
  47. :placeholder-shown
  48. :paused
  49. :playing
  50. :read-only
  51. :read-write
  52. :required
  53. :right
  54. :root
  55. :scope
  56. :state()
  57. :target
  58. :target-within
  59. :user-invalid
  60. :valid
  61. :visited
  62. :where()
Example of Hover Pseudo Class in CSS:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS Course</title>
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    <style>
 #product-overview {
   		width: 100%;
   		height: 500px;
   		background-color: blue;
   		border: black solid 5px;
   		padding: 20px;
   		margin: 30px;
   		box-sizing: border-box;
 }

 .main-nav__item{
   		display: inline-block;
 }

 .main-nav__item a:hover{
   		color: red;
 }

    </style>
</head>
<body>
    <header class="main-header">
        <div>
            <a href="index.html">
                CSS Tutorials
            </a>
        </div>
        <nav class="main-nav">
            <ul class="main-nav__items">
                <li class="main-nav__item">
                    <a href="index.html">Courses</a>
                </li>
                <li class="main-nav__item">
                    <a href="index.html">Teachers</a>
                </li>
                <li class="main-nav__item">
                    <a href="index.html">Start Learning</a>
                </li>
            </ul>
        </nav>
    </header>
   <main>
        <section class="product-overview">
            <h1>
                Get the freedom to learn from anywhere, anytime
            </h1>
        </section>
   </main>
</body>
</html>
Output:

Pseudo Classes and Elements in CSS with Examples

CSS Pseudo Elements

CSS Pseudo-elements allow us to define a style of a specific part of an element. Pseudo-elements are defined by adding two colons and then the element name.

Pseudo Elements List in CSS
  1. ::after
  2. ::backdrop
  3. ::before
  4. ::cue
  5. ::cue-region
  6. ::first-letter
  7. ::first-line
  8. ::first-selector-button
  9. ::grammar-error
  10. ::marker
  11. ::part()
  12. ::placeholder
  13. ::selection
  14. ::slotted()
  15. ::spelling-error
  16. ::target-text
Example of First-Letter CSS Pseudo Element
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS Course</title>
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    <style>
 #product-overview {
   		width: 100%;
   		height: 500px;
   		background-color: blue;
   		border: black solid 5px;
   		padding: 20px;
   		margin: 30px;
   		box-sizing: border-box;
 }

 .main-nav__item{
   		display: inline-block;
 }

 p::first-letter{
   		font: bold;
   		color: red;
   		font-size: 80px;
 }
    </style>
</head>
<body>
    <header class="main-header">
        <div>
            <a href="index.html">
                CSS Tutorials
            </a>
        </div>
        <nav class="main-nav">
            <ul class="main-nav__items">
                <li class="main-nav__item">
                    <a href="index.html">Courses</a>
                </li>
                <li class="main-nav__item">
                    <a href="index.html">Teachers</a>
                </li>
                <li class="main-nav__item">
                    <a href="index.html">Start Learning</a>
                </li>
            </ul>
        </nav>
    </header>
   <main>
        <section class="product-overview">
            <h1>
               <p> Get the freedom to learn from anywhere, anytime</p>
            </h1>
        </section>
   </main>
</body>
</html>
Output:

Pseudo Classes and Elements in CSS with Examples

In the next article, I am going to discuss Pseudo Classes and Elements in CSS with Examples. Here, in this article, I try to explain Pseudo Classes and Elements in CSS with Examples. I hope this CSS Pseudo Classes and Elements with Examples article will help you with your need. I would like to have your feedback. Please post your feedback, question, or comments about this article.

Leave a Reply

Your email address will not be published. Required fields are marked *