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.

Registration Open For New Online Training

Enhance Your Professional Journey with Our Upcoming Live Session. For complete information on Registration, Course Details, Syllabus, and to get the Zoom Credentials to attend the free live Demo Sessions, please click on the below links.

Leave a Reply

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