Class Selectors

• A class selector in CSS is used to select and apply styles to multiple HTML elements that share the same class attribute
• Unlike an ID, a class is reusable, so you can apply the same class to any number of elements on a page
• Select with a dot (.)

Attribute Selectors

• Attribute selectors are a type of CSS selector that target HTML elements based on the presence or value of their attributes
• They provide precise control for styling elements without relying on classes or IDs, allowing for more flexible and dynamic styling.
• Exact value selector [attribute="value"]

Pseudo-classes

• A CSS pseudo-class is a keyword added to a selector that defines a special state of the selected element(s)
• Unlike a regular class, you don't add a pseudo-class to your HTML
• It is automatically applied by the browser when an element meets the pseudo-class's specific condition

User action pseudo-classes (Example)

• :hover: Styles an element when the user's mouse pointer is over it
• :focus: Styles an element, like a form input, when it has focus from a click or keyboard navigation
• :active: Styles an element while it is being activated, typically when a user clicks on it
• :link: Styles an unvisited link ( element)
• :visited: Styles a link that the user has already visited

Learn More →