Posted   by 

Css Selectors Cheat Sheet



A reference for CSS goodness.

  1. Online jQuery Cheat Sheet. JQuery Cheat Sheet will help you create the code for animations, various effects and other features for your website. Find the most common code snippets on a single page. Hide the green comments with the link in the top right corner of the site. Click the code snippets to highlight then copy-paste them in your project!
  2. This cheatsheet is desinged for a quick search on CSS selectors:) There are so many CSS selectors with unfamiliar symbols,.,. + etc, so I am often confused with how CSS selectors work. I wish this infographic helps you find proper CSS selectors. Print this PDF out and stick it on the wall.

Selectors

CSS Cheat Sheets are a reference for CSS goodness. Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS Selectors Cheat Sheet In CSS, selectors are patterns used to select the element (s) you want to style.

Pseudo Selectors & Elements

First Element of its Parent Selector

p:first-of-type {}

Text Styling

Font Weight

font-weight: normal | bold | bolder | lighter | 100 - 900

Vertical Alignment

vertical-align: baseline | 10px | sub | super | top | text-top | middle | bottom | text-bottom | initial

Text Transform

text-transform: capitalise | lowercase | uppercase

Space Between Characters

letter-spacing: normal | 4px

Horizontal Alignment

text-align: left | right | center | justify

Text Align Last

Css Selectors Cheat Sheettext-align-last: auto | left | right | center | justify | start | end | initial | inherit

Text Decoration

text-decoration: none | underline | overline | line-through

Text Justify

text-justify: auto | inter-word | inter-character | none | initial | inherit

Text Overflow

text-overflow: clip | ellipsis | string | initial | inherit

Text Shadow

text-shadow: h-shadow v-shadow blur-radius color | none | initial | inherit

Position

Position

position: static | relative | absolute | fixed | sticky

Clear Floating Elements

clear: none | left | right | both

Background

Background Repeat

background-repeat: repeat-x | repeat-y | repeat | space | round | no-repeat

Background Attachment

background-attachment: scroll | fixed | local | initial | inherit

Background Position

Css Selectors Cheat Sheetbackground-position: top | right | bottom | left | center

Box Properties

Border Style

border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

List Styling

List Type

Css code cheat sheetlist-style-type: disc | circle | square | none

List Position

list-style-position: inside | outside

Flexbox

Flex Direction

flex-direction: row | row-reverse | column | column-reverse

Justify Content

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly

Align Items

align-items: flex-start | flex-end | center | baseline | stretch

Align Content

align-content: flex-start | flex-end | center | space-between | space-around | stretch

Align Self

align-self: auto | flex-start | flex-end | center | baseline | stretch

Css Style Cheat Sheet Pdf

CSS Grid

Grid Template Columns

Css Selectors Cheat Sheetgrid-template-columns: 40px 50px auto 50px 40px

Grid Template Rows

grid-template-rows: 25% 100px auto

Grid Template Areas

grid-template-areas: 'a b c' | none

Grid Template

grid-template: 'a a a' 20% 'b b b' auto | 100px 1fr / 50px 1fr

Justify Items

justify-items: start | end | center | stretch

Align Items

align-items: start | end | center | stretch

Justify Content

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly

Align Content

align-content: flex-start | flex-end | center | space-between | space-around | stretch

Grid Auto Columns

grid-auto-columns: 100px | max-content | min-content

Grid Auto Rows

grid-auto-rows: 100px | max-content | min-content

Grid Auto Flow

grid-auto-flow: row | column | row dense | column denseCss Selectors Cheat Sheet

Grid Column Start

grid-column-start: 2 | areaname | span 2 | span areaname | auto

Grid Column End

grid-column-end: 2 | areaname | span 2 | span areaname | auto

Grid Row Start

grid-row-start: 2 | areaname | span 2 | span areaname | auto

Grid Row End

grid-row-end: 2 | areaname | span 2 | span areaname | auto

Justify Self

justify-self: start | end | center | stretch

Align Self

align-self: start | end | center | stretch

Dynamic Content

Counter Increment

counter-increment: name-of-counter

Counter Dynamic Value

The Ultimate Css Selectors Cheat Sheet Pdf

content: counter(name-of-counter)

Attribute Dynamic Value

Css Selectors Cheat Sheet Selenium Pdf

content: attr(name-of-attribute)