30 selectors · 95 properties · 8 categories
CSS reference
CSS selectors, pseudo-classes and properties, with every value shown in a live example. The box model, Flexbox, Grid, typography, transitions and animations.
125 entries
Selectors
Selecting elements by tag, class, attribute and position in the document tree.
- Type selectorSelects every element with a given tag name, for example every p paragraph or every li list item.
- .classSelects elements that have the given class in their class attribute. The most commonly used selector for styling components.
- #idSelects the element with the given identifier from its id attribute. It carries very high specificity, so its rules are hard to override later.
- [attribute]Selects elements by an HTML attribute and its value: exact, starting, ending, a fragment, or a word from a list.
- *The asterisk matches every element. Used for style resets and rules that target all the children of a chosen container.
- A BA space between selectors selects B elements anywhere inside element A, at any depth.
- A > BThe > sign selects B elements that are direct children of element A, meaning they sit exactly one level below it.
- A + BThe + sign selects element B that sits directly after element A and shares the same parent.
- A ~ BThe ~ sign selects every B element that comes anywhere after element A and shares the same parent.
- A, BA comma combines several selectors into a single rule, to give them the same styles without repeating declarations.
- &Lets you write rules inside other rules, like in Sass. The & sign stands for the parent rule’s selector.
- SpecificityA selector’s weight, which decides which rule wins when several rules set the same property on the same element.
Pseudo-classes
States and positions of elements: hover, focus, checked, the nth element and validation.
- :hoverMatches the element the mouse cursor is currently over. The basis of hover effects on buttons, links, and cards.
- :focusMatches the element that has focus, meaning it currently receives keyboard input, such as a clicked form field.
- :focus-visibleMatches a focused element only when the browser decides the indicator should be visible, such as during keyboard navigation.
- :focus-withinMatches an element that either has focus itself or contains an element with focus. Lets you highlight an entire form or card.
- :activeMatches an element at the moment it’s activated, most often while the mouse button is pressed down on a button or link.
- :first-childMatches an element that is the first child of its parent.
- :last-childMatches an element that is the last child of its parent.
- :nth-child()Selects elements by position among siblings: every other one, every third, the first three, or everything from the seventh on.
- :nth-of-type()Selects elements by position among siblings with the same tag, for example every other image or the third paragraph.
- :not()Selects elements that match neither the given selector nor any selector in the list.
- :is()Matches an element against any selector in a list. Shortens long, repetitive selectors into a single notation.
- :where()Works like :is(), but always has zero specificity. Ideal for base styles that should be easy to override.
- :has()Selects an element based on what it contains or what follows it. Lets you style a parent according to its children.
- :checkedMatches a checked checkbox, a selected radio button, and a selected option in a select list.
- :disabledMatches disabled form elements, meaning ones that can’t be clicked, checked, or edited.
- :invalidMatches form fields whose value breaks an HTML validation rule, such as an empty required field or a malformed email address.
- :placeholder-shownMatches an input or textarea field that is currently showing its placeholder text, meaning it’s empty and has a placeholder attribute.
- :rootMatches the document’s root element, the html tag in HTML. The usual place for CSS variables shared across the whole page.
Box model
Sizes, margins, padding, borders and overflow.
- widthSets the width of an element.
- heightSets the height of an element.
- min-widthSets a minimum width the element won’t shrink below.
- max-widthSets a maximum width the element won’t grow beyond.
- min-heightSets a minimum height, while letting the element grow with its content.
- max-heightSets the maximum height of an element.
- marginSets the outer space between an element and its neighbors.
- paddingSets the inner space between the content and the border.
- borderShorthand that sets the width, style, and color of a border.
- border-widthSets the thickness of a border.
- border-styleSets the border line style: solid, dashed, dotted, and more.
- border-colorSets the color of a border.
- border-radiusRounds the corners of an element.
- box-sizingDecides whether width and height include the padding and border.
- outlineDraws an outline around an element that doesn’t take up space in the layout.
- overflowDecides what happens to content that doesn’t fit in an element.
- aspect-ratioSets the ratio of an element’s width to its height.
- outline-offsetPushes the outline away from the element’s edge, or pulls it inward, without changing the page layout.
- overflow-xDecides what happens to content overflowing horizontally. Its twin overflow-y does the same vertically.
- margin-inlineSets the margins at the start and end of a line. The logical version of margin-left and margin-right, aware of writing direction.
- padding-inlineSets the inner space at the start and end of a line. The logical version of padding-left and padding-right, aware of writing direction.
- inline-sizeSets the element’s size along the text line. In horizontal writing that’s the width, and its pair block-size sets the height.
- border-imageReplaces a plain border with an image or gradient sliced into corners and edges.
Layout and positioning
How an element is displayed, its position, stacking and floats.
- displayDetermines how an element behaves in the page layout and how it lays out its children.
- positionChooses how an element is positioned: in the flow, relative, absolute, fixed, or sticky.
- topMoves a positioned element away from the top edge of its reference point.
- rightMoves a positioned element away from the right edge of its reference point.
- bottomMoves a positioned element away from the bottom edge of its reference point.
- leftMoves a positioned element away from the left edge of its reference point.
- insetA shorthand that sets top, right, bottom, and left in a single declaration.
- z-indexDetermines which element sits on top when elements overlap.
- floatMoves an element to the left or right edge, and text wraps around it on the other side.
- clearForces an element to move below earlier floated elements.
- visibilityHides an element but leaves behind the empty space it occupied.
- container-typeTurns an element into a container that @container rules can query for its size. Also covers container-name and the container shorthand.
- columnsSplits an element’s content into columns like a newspaper. A shorthand for column-width and column-count.
- column-ruleDraws a line between the columns of a multi-column layout. A shorthand for the line’s width, style, and color.
- containPromises the browser that an element’s interior doesn’t affect the rest of the page, so it can limit layout recalculation and painting.
- content-visibilityLets the browser skip rendering content that isn’t visible, speeding up long pages.
Flexbox
One-dimensional layout of items in a row or a column.
- justify-contentPositions items along the main axis of a flex or grid container.
- align-itemsAligns items along the cross axis of a flex or grid container.
- flex-directionSets the direction of the main axis: flex items line up in a row or in a column.
- flex-wrapLets flex items wrap onto new lines when there isn’t enough room.
- flex-flowA shorthand that combines flex-direction and flex-wrap in one declaration.
- align-contentPositions entire lines of items along a container’s cross axis.
- align-selfOverrides the cross-axis alignment of a single item.
- orderChanges the display order of an item inside a flex or grid container.
- flex-growDetermines how eagerly an item grows to fill free space.
- flex-shrinkDetermines how much an item shrinks when the container runs out of room.
- flex-basisSets a flex item’s starting size on the main axis, before it grows or shrinks.
- flexA shorthand that sets an item’s flex-grow, flex-shrink, and flex-basis.
- gapSets the spacing between items in a flex, grid, or multi-column container.
- row-gapSets the spacing between rows in a flex or grid container.
- column-gapSets the spacing between columns in a flex, grid, or multi-column container.
Grid
A two-dimensional grid with rows, columns and named areas.
- grid-template-columnsDefines the grid’s columns: their number and widths.
- grid-template-rowsDefines the grid’s rows: their number and heights.
- grid-template-areasDescribes the grid layout with named areas, almost like a drawing in code.
- grid-templateA shorthand that sets the grid’s rows, columns, and named areas in one declaration.
- grid-auto-columnsSets the width of the columns the grid creates automatically.
- grid-auto-rowsSets the height of the rows the grid creates automatically.
- grid-auto-flowDecides how items without an explicit position fill the grid.
- grid-columnSets which grid columns an item starts and ends in.
- grid-rowSets which grid rows an item starts and ends in.
- grid-areaAssigns an item to a named grid area, or sets its rows and columns all at once.
- justify-itemsAligns all items within their cells along the horizontal axis.
- justify-selfAligns a single item within its grid cell along the horizontal axis.
- place-itemsA shorthand that sets align-items and justify-items at the same time.
- place-contentA shorthand that sets align-content and justify-content at the same time.
- place-selfA shorthand that sets align-self and justify-self for a single item.
Typography
Fonts, sizes, line height, alignment and text decoration.
- font-familyPicks a font, with a list of fallback fonts in case the first one is unavailable.
- font-sizeSets the font size.
- font-weightSets the font weight, from thin to extra bold.
- font-styleTurns on italics or an oblique slant for text.
- line-heightSets the height of each line of text, the space between lines.
- letter-spacingChanges the spacing between letters.
- word-spacingChanges the spacing between words.
- text-alignAligns text horizontally: left, right, center, or justified.
- text-decorationAdds or removes lines next to text: underline, strikethrough, overline.
- text-transformChanges letter case: all uppercase, all lowercase, or capitalized first letters.
- text-indentSets the indentation of the first line of text in a block.
- text-shadowAdds a shadow beneath text.
- white-spaceDecides how to treat spaces, line breaks, and line wrapping in text.
- word-breakLets words break at any point when they don’t fit on a line.
- overflow-wrapBreaks long words only when they would otherwise overflow their container.
- text-overflowDecides how to mark text truncated at the end of a line, for example with an ellipsis.
- vertical-alignAligns inline elements and table cell content vertically.
- font-variantTurns on font variants, for example small caps or evenly spaced numerals.
- fontShorthand that sets font style, weight, size, line height, and family all at once.
Comparisons
How similar properties and layout techniques differ and when to pick each one.
- Flexbox vs GridFlexbox lays out items along one dimension and sizes to their content. Grid defines a two-dimensional grid of rows and columns that you place items into.
- margin vs paddingmargin is transparent space outside the element. padding is space inside the border, between the content and the edge, and it takes on the element’s background.
- display vs visibility vs opacitydisplay: none removes an element from the layout, visibility: hidden hides it but keeps its space, and opacity: 0 makes it transparent, yet still clickable.
- transition vs animationtransition animates a change between two states after a trigger, e.g. :hover. animation plays back steps from @keyframes on its own, even in a loop.
- :nth-child() vs :nth-of-type()nth-child() counts every one of the parent’s elements, regardless of tag. nth-of-type() only counts siblings that share the same tag as the chosen selector.
- border vs outlineborder is part of the box model and enlarges the element, while outline draws a ring outside it, with no effect on the page layout or size.
- :focus vs :focus-visiblefocus matches any element that has focus, even after a mouse click. focus-visible only shows an indicator where the browser decides it’s actually needed.