A CSS pseudo-class targets an element through a special state or condition rather than document identity alone. It complements ordinary class names when styling states such as disabled controls or hover interactions. section 7.1.1
Use pseudo-classes when the browser can determine the styling condition:
- Apply :disabled to style a disabled button without adding a separate state class in the component. section 7.3.3
- Apply :hover to animate a button icon while the pointer is over its button. section 7.1.1 section 7.3.3
- Keep pseudo-class rules in CSS while using class names for variants such as outline and inline styles for dynamic width. section 7.3.3
State styling on a React button
A Button component receives disabled={disabled} and passes that property to the native button. CSS then handles the state independently: .button:disabled { opacity: 0.5; pointer-events: none; }. The same stylesheet uses .button:hover .button__icon to trigger the icon animation, while .button--outline handles an explicit visual variant. section 7.3.3
Listing 7.3 src/Button.jsx with class names
import "./button.css"; #1
function Button({
children,
outline = false,
disabled = false,
className = "",
width = null,
}) {
const classNames = [ #2
"button", #3
outline ? "button--outline" : "", #4
className, #5
].filter(Boolean);
const style = width #6
? { width: `${width}px` } #6
: null;
return (
<button
className={classNames.join(" ")} #7
style={style} #7
disabled={disabled}
>
{children}
<svg
className="button__icon" #8
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 490 490"
>
<polygon
points="240.112,0 481.861,245.004 240.112,490
8.139,490 250.29,245.004 8.139,0"
fill="currentColor"
/>
</svg>
</button>
);
}
export default Button;
Inspect the component implementation to see how a native disabled state coexists with class-based variants and inline sizing. section 7.3.3
