What is Pseudo CSS?

Pseudo Classes in CSS

When writing CSS you can use a variety of selectors to style different elements of your HTML, these can be things like the class or ID of the element or even the element itself if you want all of that particular element to styled a certain way. Styling using normal selectors is great, but if you want to your styling to change depending on the state of the element you'll want to use pseudo classes. You've probably already seen things like <code>:hover</code> or <code>:focus</code>, these are pseudo classes. There are a ton of different pseudo classes in CSS that you can use to make your elements more dynamically styled, in this article I'll go over a few different kinds of pseudo classes and when to use them. Here are the MDN Docs on using pseudo classes in CSS, it goes into much more detail and has every pseudo class available. https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

User Action Pseudo Classes

Some pseudo classes will change styling when certain actions are preformed by the user, for example when they hover over a button or when an element in focused. As an example I'll show how you can make a buttons styles change when ever a user hovers over it.

button {
    background-color: #fff;
    border-radius: 5px;
    height: 40px;
}
button:hover {
    background-color: #000;
    color: white;

}

Here is a link to a code pen https://codepen.io/kadeesterline/pen/RwxZjVO to check it out for yourself. By using <code>:hover</code> you can change styling of the element when the element has the mouse over it. This will allow you to write less code in general, not having to use JavaScript to change class names or styles of an element and just relying on CSS will make everything more readable and reusable.

Tree-Structural Pseudo Classes

Tree-Stuctural pseudo classes allow you to target elements based on their location within the document, for example if you wanted to style the first or last child element of an element. As an example I'll show you how you can make change just the first and last list elements of a list have different styles than the rest of the list items.

ul {
  color: #999
}

li:first-child, li:last-child {
  color: #222
}

Here is another code pen https://codepen.io/kadeesterline/pen/YzYxEJo to show how the code above actually changes the styling of elements. When using <code>:first-child</code> or <code>:last-child</code> It will change that element every time it is the child of another element, so if you want all of the first P tags to change you can just use <code>:first-child</code> to change all of them. This will cut down on the amount of classes you have to added to your code, making it more readable and easier to find what CSS is styling any given HTML element.

Pseudo Elements in CSS

While pseudo classes can be very powerful to cut down on the amount of code you write as well as making your code more readable, even more powerful in my opinion are pseudo elements. Pseudo elements are very similar to pseudo classes but instead of targeting elements based on some kind of state of the element, they style specific parts of the element. Again, styling the first child of an element is great if you want the entirety of the element to be styled a certain way but not as flexible as using pseudo elements to style just the first line or ever the first letter of an element. <br> When using pseudo classes you use one colon (:hover, :first-child) to target the class. However when using Pseudo elements one colon will work but as a best practice you'll want to use two colons (::before, ::first-line) to differentiate the two. I'll show you a few different examples and include code pens to see how they work in action.

p {
  font-size: 25px;
  color: #999
}

p::first-line {
  font-size: 45px;
  color: #000;
}

p::first-letter {
  color: #0fa;
  font-size: 80px;
}

With this example both the first line and first letter of the <code>P</code> tag are being styled differently than the rest of the element. Check it out here https://codepen.io/kadeesterline/pen/bGararo . While you could achieve this by using spans inside of other elements it is far less code way easier to read and write when you take advantage of pseudo elements to take care of it for you. Another way you can use pseudo elements is to style elements before or after an element. This code pen https://codepen.io/kadeesterline/pen/bGaraZM will show how this works as well as the CSS included below.

div {
  margin: 0 auto;
  max-width: 60%;
  height: 100px;
  background-color: #0fa;
}

div::after {
  content: '';
    position:absolute;
    top:150px;
    margin: 0 auto;
    height:100px;
    background-color: #000;
    width:60%;
}

Using Both Together

You can chain pseudo classes and pseudo elements together to write less class based CSS and focus more on styling your elements and writing more code in general. While this might not be the most straight forward way to write code it can be very powerful. I found and example here https://www.youtube.com/watch?v=1njdYdfv-Ls&ab_channel=OnlineTutorials that shows how to use both together, and here is a code pen using this example https://codepen.io/kadeesterline/pen/GRyvQoy.