Skip to content

Latest commit

 

History

History
349 lines (333 loc) · 157 KB

css-cheatsheet.md

File metadata and controls

349 lines (333 loc) · 157 KB

Table of Contents

CSS CheatSheet for Developers

CSS Properties

Syntax: property-name : value;

Some common values to all properties: inherit / initial / revert / revert-layer / unset

Property Name Description Values (Separated by /)
align-content Aligns a flex container's lines within the flex container when there is extra space in the cross-axis flex-start / flex-end / center / space-between / space-around / space-evenly / stretch / start / end / baseline / first baseline / last baseline / safe center / unsafe center
align-items Aligns flex items of the current line the same way as justify-content flex-start / flex-end / center / baseline / stretch
align-self Aligns flex items of the current line the same way as justify-content auto / flex-start / flex-end / center / baseline / stretch
all Sets all the properties initial / inherit / unset
animation A shorthand property for all the animation-* properties Syntax: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state
animation-delay Defines when the animation will start time / %
animation-direction Defines whether the animation should play in reverse on alternate cycles normal / reverse / alternate / alternate-reverse
animation-duration Defines how long an animation should take to complete one cycle time / %
animation-fill-mode Defines a style for the target element when the animation is not playing (when it is finished, or when it has a delay) none / forwards / backwards / both
animation-iteration-count Defines the number of times an animation should be played number / infinite
animation-name Specifies a name for the @keyframes animation none / keyframes-name
animation-play-state Defines whether the animation is running or paused running / paused
animation-timing-function Defines the speed curve of the animation ease / linear / ease-in / ease-out / ease-in-out / cubic-bezier(n,n,n,n)
backface-visibility Defines whether or not the back face of an element should be visible when facing the user visible / hidden
background A shorthand property for all the background-* properties Syntax background-color background-image background-position background-size background-repeat background-origin background-clip background-attachment background-blend-mode
background-attachment Sets whether a background image scrolls with the rest of the page, or is fixed scroll / fixed / local
background-blend-mode Specifies the blending mode of each background layer (color/image) normal / multiply / screen / overlay / darken / lighten / color-dodge / saturation / color / luminosity
background-clip Specifies how far the background (color or image) should extend within an element border-box / padding-box / content-box
background-color Sets the background color of an element color
background-image Sets one or more background images for an element url(image-path) / none
background-origin Specifies the origin position of a background image padding-box / border-box / content-box
background-position Sets the starting position of a background image top left / top center / top right / center left / center center / center right / bottom left / bottom center / bottom right / x-axis y-axis / x-axis / y-axis
background-repeat The way the background image is repeated repeat / repeat-x / repeaty / no-repeat
background-size Background image size length / percentage / auto / cover / contain
border Sets all border properties in one line Syntax: top right bottom left / top-bottom left-right / all-at-once
border-bottom Bottom border properties in one line Syntax: width style color
border-bottom-color Color of the bottom color (RGB, HEX, name) / transparent
border-bottom-left-radius Border bottom left radius length / percentage
border-bottom-right-radius Border bottom right radius length / percentage
border-bottom-style Border bottom style none / hidden / dotted / dashed / solid / double / groove / ridge / inset / outset
border-bottom-width Border bottom width length / percentage
border-collapse Collapses the borders between table cells collapse / separate
border-color Sets all border color properties in one line Syntax: top right bottom left / top-bottom left-right / all-at-once
border-image Shorthand property for border-image-* Syntax: source slice width outset repeat
border-image-outset Outset of the border image length / number
border-image-repeat How the border image is repeated stretch / repeat / round
border-image-slice Slices the border image number / percentage
border-image-source Source of the border image url (path to image) / none
border-image-width Width of the border image length / percentage / number
border-left Left border properties in one line Syntax: width style color
border-left-color Color of the left border color (RGB, HEX, name) / transparent
border-left-style Style of the left border none / hidden / dotted / dashed / solid / double / groove / ridge / inset / outset
border-left-width Width of the left border length / percentage
border-radius Sets all border radius properties in one line Syntax: top-left top-right bottom-right bottom-left / top-bottom left-right / all-at-once
border-right Right border properties in one line Syntax: width style color
border-right-color Color of the right border color (RGB, HEX, name) / transparent
border-right-style Style of the right border none / hidden / dotted / dashed / solid / double / groove / ridge / inset / outset
border-right-width Width of the right border length / percentage
border-spacing Spacing between the cells length / percentage
border-style Sets all border style properties in one line Syntax: top right bottom left / top-bottom left-right / all-at-once
border-top Top border properties in one line Syntax: width style color
border-top-color Color of the top border color (RGB, HEX, name) / transparent
border-top-left-radius Border top left radius length / percentage
border-top-right-radius Border top right radius length / percentage
border-top-style Style of the top border none / hidden / dotted / dashed / solid / double / groove / ridge / inset / outset
border-top-width Width of the top border length / percentage
border-width Sets all border width properties in one line Syntax: top right bottom left / top-bottom left-right / all-at-once
bottom Distance from the bottom of the element length / percentage / auto
box-shadow Adds shadow to the box Syntax: h-offset v-offset blur spread color inset
box-sizing Defines how the width and height of the element are calculated content-box / border-box
caption-side Position of the table caption top / bottom
caret-color Color of the caret color (RGB, HEX, name) / auto
clear Specifies on which sides of an element floating elements are not allowed none / left / right / both
clip Clipping region rect (top right bottom left) / auto
color Text color color (RGB, HEX, name) / transparent
column-count Number of columns number / auto
column-fill How to fill columns balance / auto
column-gap Gap between the columns length / percentage
column-rule Sets all column rule properties in one line Syntax: width style color
column-rule-color Color of the column rule color (RGB, HEX, name) / transparent
column-rule-style Style of the column rule none / hidden / dotted / dashed / solid / double / groove / ridge / inset / outset
column-rule-width Width of the column rule length / percentage
column-span How many columns an element should span across none / all
column-width Width of the columns length / percentage
columns Sets all column properties in one line Syntax: column-width column-count
content Used with the ::before and ::after pseudo-elements, to insert generated content string / url (path to image) / none
counter-increment Increases or decreases the value of one or more CSS counters counter-name value
counter-reset Resets one or more CSS counters counter-name value
cursor Specifies the mouse cursor to be displayed when pointing over an element auto / default / none / context-menu / help / pointer / progress / wait / cell / crosshair / text / vertical-text / alias / copy / move / no-drop / not-allowed / e-resize / n-resize / ne-resize / nw-resize / s-resize / se-resize / sw-resize / w-resize / ew-resize / ns-resize / nesw-resize / nwse-resize / col-resize / row-resize / all-scroll / zoom-in / zoom-out / grab / grabbing
direction Specifies the text direction/writing direction ltr / rtl
display Specifies how a certain HTML element should be displayed none / inline / block / inline-block / list-item / run-in / compact / marker / table / inline-table / table-row-group / table-header-group / table-footer-group / table-row / table-column-group / table-column / table-cell / table-caption / ruby / ruby-base / ruby-text / ruby-base-container / ruby-text-container / contents / flow / flow-root / table / flex / inline-flex / grid / inline-grid / ruby-base-group / ruby-text-group
empty-cells Specifies whether or not to display borders and background on empty cells in a table show / hide
filter Defines effects (e.g. blurring or color shifting) on an element before the element is displayed none / url (path to SVG filter) / blur (length) / brightness (percentage) / contrast (percentage) / drop-shadow (h-offset v-offset blur spread color) / grayscale (percentage) / hue-rotate (angle) / invert (percentage) / opacity (percentage) / saturate (percentage) / sepia (percentage)
flex Sets all flex properties in one line Syntax: flex-grow flex-shrink flex-basis
flex-basis Specifies the initial length of a flexible item length / auto
flex-direction Specifies the direction of the flexible items row / row-reverse / column / column-reverse
flex-flow Sets all flex flow properties in one line Syntax: flex-direction flex-wrap
flex-grow Specifies how much the item will grow relative to the rest number
flex-shrink Specifies how the item will shrink relative to the rest number
flex-wrap Specifies whether the flexible items should wrap or not nowrap / wrap / wrap-reverse
float Specifies whether or not a box should float left / right / none
font Sets all font properties in one line Syntax: font-style font-variant font-weight font-size/line-height font-family
font-family Specifies the font family for text font-name / generic-family
font-feature-settings Controls advanced typographic features in OpenType fonts normal / string
font-kerning Controls the usage of the kerning information auto / normal / none
font-language-override Controls the usage of language-specific glyphs in a typeface normal / string
font-size Specifies the font size of text length / percentage / xx-small / x-small / small / medium / large / x-large / xx-large / smaller / larger
font-size-adjust Preserves the readability of text when font fallback occurs none / number
font-stretch Selects a normal, condensed, or expanded face from a font family normal / ultra-condensed / extra-condensed / condensed / semi-condensed / semi-expanded / expanded / extra-expanded / ultra-expanded
font-style Specifies the font style for text normal / italic / oblique
font-synthesis Controls which missing typefaces (bold or italic) may be synthesized by the browser none / weight / style / weight style
font-variant Specifies whether or not a text should be displayed in a small-caps font normal / small-caps / all-small-caps / petite-caps / all-petite-caps / unicase / titling-caps
font-variant-alternates Controls the usage of alternate glyphs associated to alternative names defined in @font-feature-values normal / string
font-variant-caps Controls the usage of alternate glyphs for capital letters normal / small-caps / all-small-caps / petite-caps / all-petite-caps / unicase / titling-caps
font-variant-east-asian Controls the usage of alternate glyphs for East Asian scripts normal / string
font-variant-ligatures Controls which ligatures and contextual forms are used in textual content of the elements it applies to normal / none / string
font-variant-numeric Controls the usage of alternate glyphs for numbers, fractions, and ordinal markers normal / ordinal / slashed-zero / lining-nums / oldstyle-nums / proportional-nums / tabular-nums / diagonal-fractions / stacked-fractions
font-variant-position Controls the usage of alternate glyphs of smaller size positioned as superscript or subscript regarding the baseline of the font normal / sub / super
font-weight Specifies the weight of a font normal / bold / bolder / lighter / 100 / 200 / 300 / 400 / 500 / 600 / 700 / 800 / 900
grid Sets all grid properties in one line Syntax: grid-template-rows grid-template-columns grid-template-areas grid-auto-rows grid-auto-columns grid-auto-flow grid-column-gap grid-row-gap
grid-area Specifies a name for the grid item grid-row-start / grid-column-start / grid-row-end / grid-column-end
grid-auto-columns Specifies the size of an implicitly-created column track length / percentage / auto
grid-auto-flow Specifies how auto-placed items are inserted in the grid row / column / row dense / column dense
grid-auto-rows Specifies the size of an implicitly-created row track length / percentage / auto
grid-column Specifies a grid item's size and location within the grid column by referring to specific grid lines grid-column-start / grid-column-end
grid-column-end Specifies where to end the grid item grid-column-line
grid-column-gap Specifies the size of the gap between columns length / percentage
grid-column-start Specifies where to start the grid item grid-column-line
grid-gap Sets the gap between the rows and columns Syntax: grid-row-gap grid-column-gap
grid-row Specifies a grid item's size and location within the grid row by referring to specific grid lines grid-row-start / grid-row-end
grid-row-end Specifies where to end the grid item grid-row-line
grid-row-gap Specifies the size of the gap between rows length / percentage
grid-row-start Specifies where to start the grid item grid-row-line
grid-template Sets all grid template properties in one line Syntax: grid-template-rows grid-template-columns grid-template-areas
grid-template-areas Specifies how to display columns and rows, using named grid items none / string
grid-template-columns Specifies the size of the columns, and how many columns in a grid layout none / track-list
grid-template-rows Specifies the size of the rows in a grid layout none / track-list
height Sets the height of an element length / percentage / auto
hyphens Specifies how to split words to improve the layout of paragraphs none / manual / auto
image-orientation Specifies the orientation of an image angle / from-image
image-rendering Gives a hint to the browser about what aspects of an image are most important to preserve when the image is scaled auto / optimizeSpeed / optimizeQuality
image-resolution Specifies the intended resolution for a raster image from-image / resolution
ime-mode Specifies the state of the Input Method Editor for text fields auto / normal / active / inactive / disabled
initial-letter Specifies the styling of dropped, raised, and sunken initial letters normal / number / length / percentage
initial-letter-align Specifies the alignment of an initial letter auto / alphabetic / hanging / ideographic / mathematical
initial-letter-wrap Specifies whether the initial letter may be wrapped to the next line normal / first / all
inline-size Sets the width or height of an inline box, depending on the value of the writing-mode property length / percentage / auto
justify-content Specifies the alignment between the items inside a flexible container when the items do not use all available space flex-start / flex-end / center / space-between / space-around / space-evenly / start / end / left / right
justify-items Specifies the alignment for items inside a flexible container auto / normal / stretch / start / end / center / self-start / self-end / left / right / baseline / first baseline / last baseline / safe center / unsafe center
justify-self Specifies the alignment for selected items inside a flexible container auto / normal / stretch / start / end / center / self-start / self-end / left / right / baseline / first baseline / last baseline / safe center / unsafe center
left Specifies the left position of a positioned element length / percentage / auto
letter-spacing Increases or decreases the space between characters in a text normal / length
line-break Specifies how/if to break lines auto / loose / normal / strict / anywhere
line-height Specifies the line height normal / number / length / percentage
list-style Sets all the properties for a list in one declaration Syntax: list-style-type list-style-position list-style-image
list-style-image Specifies an image as the list-item marker none / url
list-style-position Specifies the position of the list-item markers (bullet points) inside / outside
list-style-type Specifies the type of list-item marker none / disc / circle / square / decimal / decimal-leading-zero / lower-roman / upper-roman / lower-greek / lower-latin / upper-latin / armenian / georgian / lower-alpha / upper-alpha / hebrew / cjk-ideographic / hiragana / hiragana-iroha / katakana / katakana-iroha
margin Sets all the margin properties in one declaration Syntax: margin-top margin-right margin-bottom margin-left
margin-block-end Sets the margin at the bottom of an element length / percentage / auto
margin-block-start Sets the margin at the top of an element length / percentage / auto
margin-bottom Sets the bottom margin of an element length / percentage / auto
margin-inline-end Sets the margin on the right side of an element length / percentage / auto
margin-inline-start Sets the margin on the left side of an element length / percentage / auto
margin-left Sets the left margin of an element length / percentage / auto
margin-right Sets the right margin of an element length / percentage / auto
margin-top Sets the top margin of an element length / percentage / auto
max-height Sets the maximum height of an element length / percentage / none
max-inline-size Sets the maximum width or height of an inline box, depending on the value of the writing-mode property length / percentage / none
max-width Sets the maximum width of an element length / percentage / none
min-block-size Sets the minimum height or width of an element, depending on the value of the writing-mode property length / percentage
min-height Sets the minimum height of an element length / percentage
min-inline-size Sets the minimum width or height of an element, depending on the value of the writing-mode property length / percentage
min-width Sets the minimum width of an element length / percentage
mix-blend-mode Specifies how an element's content should blend with its direct parent background normal / multiply / screen / overlay / darken / lighten / color-dodge / saturation / color / luminosity
object-fit Specifies how the contents of a replaced element should be fitted to the box established by its used height and width fill / contain / cover / none / scale-down
object-position Specifies the alignment of the replaced element inside its box x-axis y-axis / x-axis / y-axis / center
offset Sets all the offset properties in one declaration Syntax: offset-path offset-distance offset-rotate offset-anchor
offset-anchor Specifies the position of the origin of an element's offset auto / x-axis y-axis / x-axis / y-axis / center
offset-distance Specifies the distance between the origin of an element's offset and its offset path length / percentage / auto
offset-path Specifies the path the element should follow none / path() / <basic-shape> / <geometry-box>
offset-position Sets all the offset-position properties in one declaration Syntax: offset-path offset-distance offset-rotate
offset-rotate Specifies how an element should be rotated along the offset path auto / angle / reverse
opacity Sets the opacity level for an element number
order Specifies the order of the flexible item, relative to the rest integer
orphans Specifies the minimum number of lines that must be left at the bottom of a page when a page break occurs inside an element integer
outline Sets all the outline properties in one declaration Syntax: outline-width outline-style outline-color
outline-color Sets the color of an outline color
outline-offset Offsets an outline, and draws it beyond the border edge length
outline-style Sets the style of an outline none / hidden / dotted / dashed / solid / double / groove / ridge / inset / outset
outline-width Sets the width of an outline thin / medium / thick / length
overflow Specifies what happens if content overflows an element's box visible / hidden / scroll / auto / overlay / clip
overflow-wrap Specifies whether or not the browser may break lines within words in order to prevent overflow (when a string is too long to fit its containing box) normal / break-word / anywhere
overflow-x Specifies whether or not to clip the left/right edges of the content, if it overflows the element's content area visible / hidden / scroll / auto / overlay / clip
overflow-y Specifies whether or not to clip the top/bottom edges of the content, if it overflows the element's content area visible / hidden / scroll / auto / overlay / clip
padding Sets all the padding properties in one declaration Syntax: padding-top padding-right padding-bottom padding-left
padding-block-end Sets the padding at the bottom of an element length / percentage
padding-block-start Sets the padding at the top of an element length / percentage
padding-bottom Sets the bottom padding of an element length / percentage
padding-inline-end Sets the padding on the right side of an element length / percentage
padding-inline-start Sets the padding on the left side of an element length / percentage
padding-left Sets the left padding of an element length / percentage
padding-right Sets the right padding of an element length / percentage
padding-top Sets the top padding of an element length / percentage
page-break-after Specifies the page-breaking behavior after an element auto / always / avoid / left / right
page-break-before Specifies the page-breaking behavior before an element auto / always / avoid / left / right
page-break-inside Specifies the page-breaking behavior inside an element auto / avoid
perspective Gives a 3D-positioned element some perspective none / length
perspective-origin Defines at which position the user is looking at the 3D-positioned element x-axis y-axis / x-axis / y-axis / center
place-content Sets the align-content and justify-content properties in one declaration Syntax: align-content justify-content
place-items Sets the align-items and justify-items properties in one declaration Syntax: align-items justify-items
place-self Sets the align-self and justify-self properties in one declaration Syntax: align-self justify-self
pointer-events Defines whether or not an element reacts to pointer events auto / none / visiblePainted / visibleFill / visibleStroke / visible / painted / fill / stroke / all
position Specifies the type of positioning method used for an element (static, relative, absolute or fixed) static / relative / absolute / fixed / sticky
quotes Specifies how quotation marks should look none / string string string string
resize Specifies whether or not an element is resizable by the user none / both / horizontal / vertical / block / inline
right Specifies the right position of a positioned element length / percentage / auto
row-gap Sets the size of the gap between an element's grid rows length / percentage
scroll-behavior Specifies whether to smoothly animate the scroll position in a scrollable box, instead of a straight jump auto / smooth
tab-size Specifies the width of a tab character number / length
table-layout Specifies the algorithm used to lay out table cells, rows, and columns auto / fixed
text-align Specifies the horizontal alignment of text left / right / center / justify / justify-all / start / end / match-parent
text-align-last Specifies the alignment of the last line of a block element auto / left / right / center / justify / start / end
text-combine-upright Specifies how to combine multiple characters into the space of a single character none / all / digits
text-decoration Sets all the text-decoration properties in one declaration Syntax: text-decoration-line text-decoration-color text-decoration-style text-decoration-thickness
text-decoration-color Specifies the color of the text-decoration color
text-decoration-line Specifies the type of line in a text-decoration none / underline / overline / line-through / blink
text-decoration-skip Specifies what parts of an element's content are skipped over when applying any text decoration none / objects / spaces / ink
text-decoration-style Specifies the style of the line in a text decoration solid / double / dotted / dashed / wavy
text-decoration-thickness Specifies the thickness of the line in a text decoration auto / from-font / length
text-indent Specifies the indentation of the first line in a text-block length / percentage
text-orientation Specifies the orientation of the text in a line mixed / upright / sideways / sideways-right / sideways-left / use-glyph-orientation
text-overflow Specifies what should happen when text overflows the containing element clip / ellipsis
text-rendering Gives a fine-grained control over the algorithm used to render text auto / optimizeSpeed / optimizeLegibility / geometricPrecision
text-shadow Adds shadow to text none / h-shadow v-shadow blur color
text-transform Controls the capitalization of text none / capitalize / uppercase / lowercase / full-width / full-size-kana
text-underline-offset Specifies the position of the underline which is set using the text-decoration property auto / length
text-underline-position Specifies the position of the underline which is set using the text-decoration property auto / under / left / right
top Specifies the top position of a positioned element length / percentage / auto
touch-action Specifies whether and how a particular region can be manipulated by a user auto / none / pan-x / pan-left / pan-right / pan-y / pan-up / pan-down / pinch-zoom
transform Applies a 2D or 3D transformation to an element none / matrix() / matrix3d() / perspective() / rotate() / rotate3d() / rotateX() / rotateY() / rotateZ() / scale() / scale3d() / scaleX() / scaleY() / scaleZ() / skew() / skewX() / skewY() / translate() / translate3d() / translateX() / translateY() / translateZ()
transform-box Defines the box to which the transform-origin property applies border-box / fill-box / view-box
transform-origin Allows you to change the position on transformed elements x-axis y-axis z-axis / x-axis y-axis / x-axis / y-axis / z-axis / left / center / right / top / bottom
transform-style Specifies how nested elements are rendered in 3D space flat / preserve-3d
transition A shorthand property for all the transition-* properties Syntax: transition-property transition-duration transition-timing-function transition-delay
transition-delay Specifies when the transition effect will start time
transition-duration Specifies how many seconds or milliseconds a transition effect takes to complete time
transition-property Specifies the name of the CSS property the transition effect is for none / all / property
transition-timing-function Specifies the speed curve of the transition effect ease / ease-in / ease-out / ease-in-out / linear / step-start / step-end / steps() / cubic-bezier()
unicode-bidi Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document normal / embed / bidi-override
user-select Specifies whether the text of an element can be selected auto / none / text / all / contain
vertical-align Sets the vertical alignment of an element baseline / sub / super / top / text-top / middle / bottom / text-bottom / length / percentage
visibility Specifies whether or not an element is visible visible / hidden / collapse
white-space Specifies how white-space inside an element is handled normal / pre / nowrap / pre-wrap / pre-line / break-spaces
width Sets the width of an element length / percentage / auto
will-change Indicates what will change before the element is actually changed auto / contents / scroll-position / transform
word-break Specifies how words should break when reaching the end of a line normal / break-all / keep-all / break-word
word-spacing Increases or decreases the space between words in a text normal / length
word-wrap Specifies whether or not the browser may break lines within words in order to prevent overflow (when a string is too long to fit its containing box) normal / break-word
writing-mode Specifies whether lines of text are laid out horizontally or vertically and the direction which lines of text and blocks progress horizontal-tb / vertical-rl / vertical-lr / sideways-rl / sideways-lr
z-index Specifies the stack order of an element auto / number

🔼Back to Top

CSS Selectors

Command Description
* all elements
div all 'div' tags
div.p all 'div' and 'p' paragraphs
div p paragraphs inside divs
div > p all 'p' tag one level deep in 'div'
div + p p tags immediately after div
div ~ p p tags preceded by div
.class-name all elements with class
#id-name element with 'id'
div.class-name divs with certain classname
div#id-name div with certain 'id'
#id-name all elements iside that #id-name

🔼Back to Top

CSS Pseudo Classes

Command Description
a:link link in normal state
a:active link in clicked state
a:hover link with mouse over it
a:visited visited link
p::after{content:"yo"/} add content after p
p::before add content before p
input:checked checked inputs
input:disabled disabled inputs
input:enabled enabled inputs
input:focus input has focus
input:in-range value in range
input:out-of-range input value out of range
input:valid input with valid value
input:invalid input with invalid value
input:optional no required attribute
input:required input with requred attribute
input:read-only with readonly attribute
input:read-write no readonly attrib.
div:empty element with no children
p::first-letter first letter in p
p::first-line first line in p
p:first-of-type first of some type
p:last-of-type last of some type
p:lang(en) p with en language attribute
:not(span) element that's not a span
p:first-child first child of its parent
p:last-child last child of its parent
p:nth-child(2) second child of its parent
p:nth-child(3n+1) nth-child (an + b) formula
p:nth-last-child(2) second child from behind
p:nth-of-type(2) second p of its parent
p:nth-last-of-type(2) ...from behind
p:only-of-type unique of its parent
p:only-child only child of its parent
:root documents root element
::selection portion selected by user
:target highlight active anchor

🔼Back to Top

CSS Attribute Selectors

Command Description
a[target] links with a target attribute
a[target="_blank"] links which open in new tab
[title~="chair"] title element containing a word
[class^="chair"] class starts with chair
[class="chair"] class starts with the chair word
[class*="chair"] class contains chair
[class$="chair"] class ends with chair
input[type="button"] specified input type

🔼Back to Top