CSS selectors are used in CSS to select and style HTML elements on a page. Pseudo-classes allow us to define styles based on an element's state or its relation to other elements. This guide serves as your map, detailing and visualizing these essential selectors.
Table of contents
* universal selectorelement element selector.class class selector#id ID selector.class.class-2 multiple selectors.class, .class-2 comma combinator.class .class-2 descendant selector.class + .class-2 adjacent selector.class > .class-2 child selector.class ~ .class-2 general sibling selector* + * lobotomized owl[attr] attribute selector[attr=val] attribute & attribute value[attr~=val] attribute & one of the attribute's values[attr*=val] attribute & partial value[attr^=val] attribute & starting value[attr$=val] attribute & ending value:link :visited :hover & :active link pseudo-class selectors:focus focused input element(s):checked checked input element(s):disabled disabled input element(s):enabled enabled input element(s):valid valid input element(s):invalid invalid input element(s):required required input element(s):optional optional input element(s):first-child first child element:last-child last child element:nth-child nth child element:nth-last-child nth child element, counting backwards from last:only-child only child of an element:first-of-type first element of a type:last-of-type last element of a type:nth-of-type nth element of a type:nth-last-of-type nth element of type, counting backwards:only-of-type only element of its type:target target element selector:not() negation pseudo-class:has() parent selector::before first child pseudo-element::after last child pseudo-element::first-letter first letter pseudo-element::first-line first line pseudo-element::placeholder text input placeholder::selection style highlighted box::marker list marker pseudo-elementMore pseudo-classes3 Comments
Sort: