Advanced CSS Selectors

Types of Selectors

Type Description Example
Element HTML elements, p p {text-align: center;}
Class selects HTML elements with a specific class attribute. .center {text-align: center;}
ID The id selector is used to select one unique element. #para {text-align: center;}
Universal The universal selector selects all HTML elements on the page. * {text-align: center;}
Pseudo-class A pseudo-class is used to define a special state of an element. :hover {background-color: blue;}
Pseudo-element A CSS pseudo-element is used to style specified parts of an element. h1::before {content: url(smiley.gif);}
Combinator A combinator explains the relationship between the selectors div > p {background-color: yellow;}
Attribute An attribute selector is used to select elements with a specified attribute. a[target] {background-color: yellow;}