Science Knowings: CSS Course For Social Media

CSS Pseudo-classes

CSS Pseudo-classes: Adding Interactivity to Your Styles

Welcome back!

Previously, we covered the fundamentals of CSS units and the art of writing effective copy for the web. Today, we dive into CSS pseudo-classes, a powerful tool for adding dynamic behavior to your web pages!

What are CSS Pseudo-classes?

CSS pseudo-classes are special keywords that allow you to apply styles to elements based on their state or interaction. They let you create interactive and responsive web designs.

The Importance of CSS Pseudo-classes

Pseudo-classes enhance the user experience by providing visual feedback and improving accessibility. They help users navigate, focus on important elements, and engage with your website.

Types of CSS Pseudo-classes

There are numerous pseudo-classes, each with a specific purpose. Here are some commonly used ones:

  • :hover: Styles an element when the cursor hovers over it.
  • :focus: Styles an element when it has keyboard focus.
  • :active: Styles an element when it is being clicked or activated.

:hover

:hover is used to change the appearance of an element when the mouse cursor hovers over it. This is commonly used for buttons, links, and menu items.

a:hover {
  color: blue;
  text-decoration: underline;
}

:focus

:focus styles an element when it has keyboard focus. This is useful for highlighting interactive elements, such as input fields and buttons.

input:focus {
  border: 2px solid blue;
}

:active

:active styles an element when it is being clicked or activated. This is often used to provide visual feedback during user interactions.

button:active {
  background-color: red;
}

:visited

:visited styles links that have been visited by the user. This allows you to differentiate between visited and unvisited links.

a:visited {
  color: gray;
}

:link

:link styles links that have not been visited by the user. This is the default style for links and is often used to make unvisited links stand out.

a:link {
  color: blue;
}

:disabled

:disabled styles disabled elements, such as disabled buttons or input fields. This helps users identify and avoid interacting with inactive elements.

input:disabled {
  color: gray;
  background-color: #ccc;
}

:checked

:checked styles checked elements, such as checkboxes or radio buttons. This is used to provide visual feedback to users and indicate the current state of the element.

input:checked {
  background-color: green;
}

:nth-child()

:nth-child(n) selects elements that are the nth child of their parent. This is useful for styling specific elements in a list or series.

li:nth-child(even) {
  background-color: #f0f0f0;
}

:first-child

:first-child selects the first child element of its parent. This is useful for styling the first element in a list or series differently.

li:first-child {
  font-weight: bold;
}

:last-child

:last-child selects the last child element of its parent. This is useful for styling the last element in a list or series differently.

li:last-child {
  border-bottom: 1px solid black;
}

:only-child

:only-child selects elements that are the only child of their parent. This is useful for styling elements that are unique within their context.

div:only-child {
  margin: auto;
}

:empty

:empty selects elements that have no children. This is useful for styling empty elements or creating placeholder content.

p:empty {
  color: gray;
  font-style: italic;
}

:target

:target selects the element that matches the current fragment identifier (hash) in the URL. This is useful for styling elements when they are accessed directly via a link with a fragment.

p:target {
  background-color: yellow;
}

Next Topic: CSS Pseudo-elements

Coming Up Next!

In our next session, we'll delve into CSS pseudo-elements, another powerful tool for enhancing the styling and functionality of your web pages. They allow you to select and style specific parts of elements, giving you even greater control over your designs. Follow us for more exciting CSS adventures!