CSS Selectors
In CSS, selectors are patterns used to select the element(s) you want to style.The "CSS" column indicates in which CSS version the property is defined (CSS1 or CSS2).
| Selector | Example | Example description | CSS |
|---|---|---|---|
| .class | .intro | Selects all elements with class="intro" | 1 |
| #id | #firstname | Selects the element with id="firstname" | 1 |
| * | * | Selects all elements | 2 |
| [attribute] | [target] | Selects all elements with a target attribute | 2 |
| [attribute=value] | [target=_blank] | Selects all elements with target="_blank" | 2 |
| [attribute~=value] | [title~=flower] | Selects all elements with a title attribute containing the word "flower" | 2 |
| [attribute|=language] | [lang|=en] | Selects all elements with a lang attribute value starting with "en" | 2 |
| element | p | Selects all <p> elements | 1 |
| element,element | div,p | Selects all <div> elements and all <p> elements | 1 |
| element element | div p | Selects all <p> elements inside <div> elements | 1 |
| element>element | div>p | Selects all <p> elements where the parent is a <div> element | 2 |
| element+element | div+p | Selects all <p> elements placed immediately after <div> elements | 2 |
| :active | a:active | Selects the active link | 1 |
| :after | p:after | Insert content after every <p> element | 2 |
| :before | p:before | Insert content before every <p> element | 2 |
| :first-child | p:first-child | Selects every <p> elements that is the first child of its parent | 2 |
| :first-letter | p:first-letter | Selects the first letter of every <p> element | 1 |
| :first-line | p:first-line | Selects the first line of every <p> element | 1 |
| :focus | input:focus | Selects the input element which has focus | 2 |
| :hover | a:hover | Selects links on mouse over | 1 |
| :lang(language) | p:lang(it) | Selects every <p> element with a lang attribute value starting with "it" | 2 |
| :link | a:link | Selects all unvisited links | 1 |
| :visited | a:visited | Selects all visited links | 1 |
CSS Properties
The links in the "Property" column point to syntax, examples, browser support, etc.The "CSS" column indicates in which CSS version the property is defined (CSS1 or CSS2).
| Property | Description | CSS |
|---|---|---|
| background | Sets all the background properties in one declaration | 1 |
| background-attachment | Sets whether a background image is fixed or scrolls with the rest of the page | 1 |
| background-color | Sets the background color of an element | 1 |
| background-image | Sets the background image for an element | 1 |
| background-position | Sets the starting position of a background image | 1 |
| background-repeat | Sets how a background image will be repeated | 1 |
| border | Sets all the border properties in one declaration | 1 |
| border-bottom | Sets all the bottom border properties in one declaration | 1 |
| border-bottom-color | Sets the color of the bottom border | 2 |
| border-bottom-style | Sets the style of the bottom border | 2 |
| border-bottom-width | Sets the width of the bottom border | 1 |
| border-color | Sets the color of the four borders | 1 |
| border-collapse | Specifies whether or not table borders should be collapsed | 2 |
| border-left | Sets all the left border properties in one declaration | 1 |
| border-left-color | Sets the color of the left border | 2 |
| border-left-style | Sets the style of the left border | 2 |
| border-left-width | Sets the width of the left border | 1 |
| border-right | Sets all the right border properties in one declaration | 1 |
| border-right-color | Sets the color of the right border | 2 |
| border-right-style | Sets the style of the right border | 2 |
| border-right-width | Sets the width of the right border | 1 |
| border-spacing | Specifies the distance between the borders of adjacent cells | 2 |
| border-style | Sets the style of the four borders | 1 |
| border-top | Sets all the top border properties in one declaration | 1 |
| border-top-color | Sets the color of the top border | 2 |
| border-top-style | Sets the style of the top border | 2 |
| border-top-width | Sets the width of the top border | 1 |
| border-width | Sets the width of the four borders | 1 |
| bottom | Sets the bottom margin edge for a positioned box | 2 |
| caption-side | Specifies the placement of a table caption | 2 |
| clear | Specifies which sides of an element where other floating elements are not allowed | 1 |
| clip | Clips an absolutely positioned element | 2 |
| color | Sets the color of text | 1 |
| content | Used with the :before and :after pseudo-elements, to insert generated content | 2 |
| counter-increment | Increments one or more counters | 2 |
| counter-reset | Creates or resets one or more counters | 2 |
| cursor | Specifies the type of cursor to be displayed | 2 |
| direction | Specifies the text direction/writing direction | 2 |
| display | Specifies the type of box an element should generate | 1 |
| empty-cells | Specifies whether or not to display borders and background on empty cells in a table | 2 |
| float | Specifies whether or not a box should float | 1 |
| font | Sets all the font properties in one declaration | 1 |
| font-family | Specifies the font family for text | 1 |
| font-size | Specifies the font size of text | 1 |
| font-style | Specifies the font style for text | 1 |
| font-variant | Specifies whether or not a text should be displayed in a small-caps font | 1 |
| font-weight | Specifies the weight of a font | 1 |
| height | Sets the height of an element | 1 |
| left | Sets the left margin edge for a positioned box | 2 |
| letter-spacing | Increase or decrease the space between characters in a text | 1 |
| line-height | Sets the line height | 1 |
| list-style | Sets all the properties for a list in one declaration | 1 |
| list-style-image | Specifies an image as the list-item marker | 1 |
| list-style-position | Specifies if the list-item markers should appear inside or outside the content flow | 1 |
| list-style-type | Specifies the type of list-item marker | 1 |
| margin | Sets all the margin properties in one declaration | 1 |
| margin-bottom | Sets the bottom margin of an element | 1 |
| margin-left | Sets the left margin of an element | 1 |
| margin-right | Sets the right margin of an element | 1 |
| margin-top | Sets the top margin of an element | 1 |
| max-height | Sets the maximum height of an element | 2 |
| max-width | Sets the maximum width of an element | 2 |
| min-height | Sets the minimum height of an element | 2 |
| min-width | Sets the minimum width of an element | 2 |
| orphans | Sets the minimum number of lines that must be left at the bottom of a page when a page break occurs inside an element | 2 |
| outline | Sets all the outline properties in one declaration | 2 |
| outline-color | Sets the color of an outline | 2 |
| outline-style | Sets the style of an outline | 2 |
| outline-width | Sets the width of an outline | 2 |
| overflow | Specifies what happens if content overflows an element's box | 2 |
| padding | Sets all the padding properties in one declaration | 1 |
| padding-bottom | Sets the bottom padding of an element | 1 |
| padding-left | Sets the left padding of an element | 1 |
| padding-right | Sets the right padding of an element | 1 |
| padding-top | Sets the top padding of an element | 1 |
| page-break-after | Sets the page-breaking behavior after an element | 2 |
| page-break-before | Sets the page-breaking behavior before an element | 2 |
| page-break-inside | Sets the page-breaking behavior inside an element | 2 |
| position | Specifies the type of positioning for an element | 2 |
| quotes | Sets the type of quotation marks for embedded quotations | 2 |
| right | Sets the right margin edge for a positioned box | 2 |
| table-layout | Sets the layout algorithm to be used for a table | 2 |
| text-align | Specifies the horizontal alignment of text | 1 |
| text-decoration | Specifies the decoration added to text | 1 |
| text-indent | Specifies the indentation of the first line in a text-block | 1 |
| text-shadow | Specifies the shadow effect added to text | 2 |
| text-transform | Controls the capitalization of text | 1 |
| top | Sets the top margin edge for a positioned box | 2 |
| unicode-bidi | 2 | |
| vertical-align | Sets the vertical alignment of an element | 1 |
| visibility | Specifies whether or not an element is visible | 2 |
| white-space | Specifies how white-space inside an element is handled | 1 |
| widows | Sets the minimum number of lines that must be left at the top of a page when a page break occurs inside an element | 2 |
| width | Sets the width of an element | 1 |
| word-spacing | Increases or decreases the space between words in a text | 1 |
| z-index | Sets the stack order of an element | 2 |