Day 11: Diving Into Advanced CSS: Attribute Selectors and Pseudo-Classes

Welcome back to my full-stack development journey! Today, I dove into some advanced CSS techniques that are essential for fine-tuning the appearance and behavior of web elements. Specifically, I focused on attribute selectors and pseudo-classes. Here's what I learned:

Attribute Selectors

Attribute selectors allow you to apply styles based on the presence or value of attributes on HTML elements. They provide a powerful way to target elements without adding extra classes or IDs. Here are the types of attribute selectors I explored:

Basic Attribute Selector ([attr])

a[href] {
    color: red;
    font-weight: bold;
}

This rule applies to all <a> elements with an href attribute, setting the text color to red and the font weight to bold.

Exact Attribute Value Selector ([attr="value"])

a[target="_blank"] {
    color: green; /* Sets text color to green */
    font-weight: lighter; /* Sets font weight to lighter */
}

This rule targets <a> elements with target="_blank", changing the text color to green and the font weight to lighter. This is useful for styling links that open in a new tab or window.

Contains Value Selector

a[href*="https"] {
    color: brown; /* Sets text color to brown */
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; /* Sets font family */
}

This rule applies to <a> elements where the href attribute contains "https". It changes the text color to brown and applies a specific font family, making secure links stand out.

Ends With Value Selector

a[href$="org"] {
    text-transform: uppercase; /* Transforms text to uppercase */
}

This rule targets <a> elements where the href attribute ends with "org". It transforms the text to uppercase, useful for highlighting organizational links.

Pseudo-Classes

Pseudo-classes in CSS allow you to style elements based on their state or position. Here are some pseudo-classes I practiced:

:hover

a:hover {
    color: blue;
}

This pseudo-class changes the text color of <a> elements to blue when the user hovers over them.

:active

button:active {
    background-color: red;
}

This pseudo-class changes the background color of <button> elements to red when they are actively clicked.

:checked

input:checked {
    background-color: yellow;
}

This pseudo-class applies a yellow background color to <input> elements that are checked, such as checkboxes or radio buttons.

:nth-of-type()

p:nth-of-type(2) {
    color: green;
}

This pseudo-class targets the second <p> element within its parent, changing its text color to green

Methods and Utilization :

I worked with these selectors and pseudo-classes in a variety of scenarios to make sure I understood them. Using these styles, I was able to add visually appealing and engaging components to my test sites. It's incredible how these methods may improve uniformity in design and the user experience.