index
- background
- background-attachment
- background-color
- background-image
- background-position
- background-repeat
- border
- border-color
- border-style
- border-width
- outline
- outline-color
- outline-style
- outline-width
- cursor
- display
- float
- position
- visibility
- height
- line-height
- max-height
- max-width
- min-height
- min-width
- width
- font
- font-family
- font-size
- font-size-adjust
- font-stretch
- font-style
- font-variant
- font-weight
- content
- counter-increment
- counter-reset
- quotes
- list-style
- list-style-image
- list-style-position
- list-style-type
- marker-offset
- margin
- margin-top
- margin-right
- margin-bottom
- margin-left
- padding
- padding-top
- padding-right
- padding-bottom
- padding-left
- bottom
- clip
- left
- overflow
- position
- right
- top
- z-index
- border-collapse
- border-spacing
- caption-side
- empty-cells
- table-layout
- color
- direction
- line-height
- letter-spacing
- text-align
- text-decoration
- text-indent
- text-shadow
- text-transform
- unicode-bidi
- vertical-align
- white-space
- word-spacing
Relevant Links
Box drawing

animation : A shorthand property for all the animation properties below, except the animation-play-state property; CSS3
animation-duration : Specifies how many seconds or milliseconds an animation takes to complete one cycle; CSS3
animation-direction : Specifies whether or not the animation should play in reverse on alternate cycles; CSS3
background and
tutorial : The background shorthand property sets all the background properties in one declaration. The properties that can be set, are (in order): background-color, background-image, background-repeat, background-attachment, and background-position. It does not matter if one of the values above are missing, e.g. background:#ff0000 url('smiley.gif'); is allowed.
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
background-color : Sets the background color of an element.
- color-rgb
- color-hex
- color-name
- transparent
background-image : Sets an image as the background
- url(URL): The URL to the image, like background-image:url('paper.gif');
- none: No background image will be displayed. This is default
- inherit: Specifies that the background image should be inherited from the parent element
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% y%
- xpos ypos
background-repeat : Sets if/how a background image will be repeated
- repeat
- repeat-x
- repeat-y
- no-repeat
border : The border shorthand property sets all the border properties in one declaration. The properties that can be set, are (in order): border-width, border-style, and border-color. It does not matter if one of the values above are missing, e.g. border:solid #ff0000; is allowed; CSS1.
border-top : A shorthand property for setting all of the properties for the top border in one declaration; CSS1.
border-right : A shorthand property for setting all of the properties for the right border in one declaration; CSS1
border-bottom : A shorthand property for setting all of the properties for the bottom border in one declaration; CSS1
border-left : A shorthand property for setting all of the properties for the left border in one declaration; CSS1
- border-width: Specifies the width of the border.
- border-style: Specifies the style of the border.
- border-color: Specifies the color of the border.
outline :
A shorthand property for setting all the outline properties in one declaration
An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".
- outline-color
- outline-style
- outline-width
outline-color :
Sets the color of the outline around an element
- color_name: Specifies the outline color with a color name, like red
- hex_number: Specifies the outline color with a hex code, like #ff0000
- rgb_number: Specifies the outline color with an RGB code, like rgb(255,0,0)
- invert: Performs a color inversion. This ensures that the outline is visible, regardless of color background. This is default
outline-style :
Sets the style of the outline around an element
- none: Specifies no outline
- dotted: Specifies a dotted outline
- dashed: Specifies a dashed outline
- solid: Specifies a solid outline
- double: Specifies a double outliner
- groove: Specifies a 3D grooved outline. The effect depends on the outline-color value
- ridge: Specifies a 3D ridged outline. The effect depends on the outline-color value
- inset: Specifies a 3D inset outline. The effect depends on the outline-color value
- outset: Specifies a 3D outset outline. The effect depends on the outline-color value
- inherit: Specifies that the outline style should be inherited from the parent element
outline-width :
Sets the width of the outline around an element
- thin: Specifies a thin outline
- medium: Specifies a medium outline. This is default
- thick: Specifies a thick outline
- length: Allows you to define the thickness of the outline
- inherit: Specifies that the width of the outline should be inherited from the parent element
border-image : A shorthand property for setting all the border-image-* properties; CSS3.
border-image-outset : Specifies the amount by which the border image area extends beyond the border box; CSS3
border-image-repeat : Specifies whether the image-border should be repeated, rounded or stretched; CSS3
border-radius : A shorthand property for setting all the four border-*-radius properties; CSS3
box-decoration-break : CSS3
box-shadow : Attaches one or more drop-shadows to the box; CSS3
overflow-x : Specifies whether or not to clip the left/right edges of the content, if it overflows the element's content area; CSS3
overflow-y :
Specifies whether or not to clip the top/bottom edges of the content, if it overflows the element's content area; CSS3
overflow-style :
Specifies the preferred scrolling method for elements that overflow; CSS3
rotation :
Rotates an element around a given point defined by the rotation-point property; CSS3
rotation-point :
Defines a point as an offset from the top left border edge; CSS3
float : Sets where an image or a text will appear in another element; specifies whether or not a box (an element) should float. Note: Absolutely positioned elements ignores the float property! See also:
What is CSS Float?
getting container div to fit around floated children divs
2 answers:
- use <div class="clear"> </div> after last floated div in the container
.clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }
- or give the container div overflow: auto;
div.container { overflow: auto; width: 820px; margin-top: 10px; }
- left: The element floats to the left
- right: The element floats the right
- none: The element is not floated, and will be displayed just where it occurs in the text. This is default
- inherit: Specifies that the value of the float property should be inherited from the parent element
clear : Sets the sides of an element where other floating elements are not allowed.
- left: No floating elements allowed on the left side
- right: No floating elements allowed on the right side
- both: No floating elements allowed on either the left or the right side
- none: Default. Allows floating elements on both sides
display : Sets how/if an element is displayed. See also:
CSS Display and Visibility
- none: The element will generate no box at all
- block: The element will generate a block box (a line break before and after the element)
- inline: The element will generate an inline box (no line break before or after the element). This is default
- inline-block: The element will generate a block box, laid out as an inline box
- inline-table: The element will generate an inline box (like <table>, with no line break before or after)
- list-item: The element will generate a block box, and an inline box for the list marker
- run-in: The element will generate a block or inline box, depending on context
- table: The element will behave like a table (like <table>, with a line break before and after)
- table-caption: The element will behave like a table caption (like <caption>)
- table-cell: The element will behave like a table cell
- table-column: The element will behave like a table column
- table-column-group: The element will behave like a table column group (like <colgroup>)
- table-footer-group: The element will behave like a table footer row group
- table-header-group: The element will behave like a table header row group
- table-row: The element will behave like a table row
- table-row-group: The element will behave like a table row group
- inherit: Specifies that the value of the display property should be inherited from the parent element
cursor : Specifies the type of cursor to be displayed.
- url
- auto
- crosshair
- default
- pointer
- move
- e-resize
- ne-resize
- nw-resize
- n-resize
- se-resize
- sw-resize
- s-resize
- w-resize
- text
- wait
- help
position : Places an element in a static, relative, absolute or fixed position
- static: Default. No position, the element occurs in the normal flow (ignores any top, bottom, left, right, or z-index declarations)
- relative: Generates a relatively positioned element, positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position
- absolute: Generates an absolutely positioned element, positioned relative to the first parent element that has a position other than static. The element's position is specified with the "left", "top", "right", and "bottom" properties
- fixed: Generates an absolutely positioned element, positioned relative to the browser window. The element's position is specified with the "left", "top", "right", and "bottom" properties
color-profile : Permits the specification of a source color profile other than the default; CSS3
opacity :
Sets the opacity level for an element; CSS3
rendering-intent : Permits the specification of a color profile rendering intent other than the default; CSS3
bookmark-label : Specifies the label of the bookmark; CSS3
bookmark-level : Specifies the level of the bookmark; CSS3
bookmark-target : Specifies the target of the bookmark link; CSS3
float-offset : Pushes floated elements in the opposite direction of the where they have been floated with float; CSS3
hyphenate-after : Specifies the minimum number of characters in a hyphenated word after the hyphenation character; CSS3
hyphenate-before : Specifies the minimum number of characters in a hyphenated word before the hyphenation character; CSS3
hyphenate-character : Specifies a string that is shown when a hyphenate-break occurs; CSS3
hyphenate-lines : Indicates the maximum number of successive hyphenated lines in an element; CSS3
hyphenate-resource : Specifies a comma-separated list of external resources that can help the browser determine hyphenation points; CSS3
hyphens : Sets how to split words to improve the layout of paragraphs; CSS3
image-resolution : Specifies the correct resolution of images; CSS3
marks : Adds crop and/or cross marks to the document; CSS3
string-set : CSS3
CSS Dimension
height : Sets the height of an element; CSS1
line-height : The line-height property specifies the line height, for spacing lines of text. Note: Negative values are not allowed.
- normal: A normal line height. This is default
- number: A number that will be multiplied with the current font size to set the line height
- length: A fixed line height in px, pt, cm, etc.
- %: A line height in percent of the current font size
max-height : The max-height property sets the maximum height of an element. Note: The max-height property does not include padding, borders, or margins! CSS2.
max-width : Sets the maximum width of an element; CSS2.
min-height : Sets the minimum height of an element; CSS2
min-width : Sets the minimum width of an element; CSS2.
width : Sets the width of an element; CSS1.
box-align :
Specifies how to align the child elements of a box; CSS3
box-direction : Specifies in which direction the children of a box are displayed; CSS3
box-flex : Specifies whether the children of a box is flexible or inflexible in size; CSS3
box-lines : Specifies whether columns will go onto a new line whenever it runs out of space in the parent box; CSS3
box-orient :
Specifies whether the children of a box should be laid out horizontally or vertically; CSS3
box-pack :
Specifies the horizontal position in horizontal boxes and the vertical position in vertical boxes; CSS3
font and
15.8 : A shorthand property for setting all of the properties for a font in one declaration. The properties that can be set, are (in order): "font-style font-variant font-weight font-size/line-height font-family". The font-size and font-family values are required. If one of the other values are missing, the default values will be inserted, if any; CSS1.
- font-style
- font-variant
- font-weight
- font-size/line-height
- font-family
- caption
- icon
- menu
- message-box
- small-caption
- status-bar
font-family :
A prioritized list of font family names and/or generic family names for an element; CSS1.
- family-name
- generic-family
font-size
15.7 : Specifies the font size of text; CSS1.
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
- smaller
- larger
- length%
font-size-adjust : Specifies an aspect value for an element that will preserve the x-height of the first-choice font; Preserves the readability of text when font fallback occurs; CSS3
font-stretch :
Condenses or expands the current font-family; Selects a normal, condensed, or expanded face from a font family; CSS3
- normal
- wider
- narrower
- ultra-condensed
- extra-condensed
- condensed
- semi-condensed
- semi-expanded
- expanded
- extra-expanded
- ultra-expanded
font-variant :
Specifies whether or not a text should be displayed in a small-caps font; CSS1.
font-weight :
Sets the weight of a font; CSS1.
- normal
- bold
- bolder
- lighter
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
@font-face :
A rule that allows websites to download and use fonts other than the "web-safe" fonts; CSS3
content :
Used with the :before and :after pseudo-elements, to insert generated content; CSS2.
- string
- url
- counter(name)
- counter(name, list-style-type)
- counters(name, string)
- counters(name, string, list-style-type)
- attr(X)
- open-quote
- close-quote
- no-open-quote
- no-close-quote
counter-increment : A way to number sections and sub-sections with "Section 1", "1.1", "1.2", etc.
JavaScript syntax: object.style.counterIncrement="subsection"; CSS2.
- none : No counters will be incremented
- identifier number : The id defines which counter that should be incremented. The number sets how much the counter will increment on each occurrence of the selector. The default increment is 1. 0 or negative values, are allowed. If the id refers to a counter that has not been initialized by counter-reset, the default initial value is 0
counter-reset : Creates or resets one or more counters; sets the value the counter is set to on each occurrence of a selector; CSS2.
quotes :
Sets the type of quotation marks for embedded quotations; CSS2.
crop : Allows a replaced element to be just a rectangular area of an object, instead of the whole object; CSS3
move-to : Causes an element to be removed from the flow and reinserted at a later point in the document; CSS3
page-policy : Determines which page-based occurance of a given element is applied to a counter or string value; CSS3
grid-columns :
Specifies the width of each column in a grid; CSS3
grid-rows :
Specifies the height of each column in a grid; CSS3
target : A shorthand property for setting the target-name, target-new, and target-position properties; CSS3
target-name : Specifies where to open links (target destination); CSS3
target-new : Specifies whether new destination links should open in a new window or in a new tab of an existing window; CSS3
target-position : Specifies where new destination links should be placed; CSS3
| Selector |
Example |
Selects |
| * |
$("*") |
All elements |
| #id |
$("#lastname") |
The element with id=lastname |
| .class |
$(".intro") |
All elements with class="intro" |
| element |
$("p") |
All p elements |
| .class.class |
$(".intro.demo") |
All elements with the classes "intro" and "demo" |
| s1,s2,s3 |
$("th,td,.intro") |
All elements with matching selectors |
| [attribute] |
$("[href]") |
All elements with a href attribute |
| [attribute=value] |
$("[href='default.htm']") |
All elements with a href attribute value equal to "default.htm" |
| [attribute!=value] |
$("[href!='default.htm']") |
All elements with a href attribute value not equal to "default.htm" |
| [attribute$=value] |
$("[href$='.jpg']") |
All elements with a href attribute value ending with ".jpg" |
| :animated |
$(":animated") |
All animated elements |
:button |
$(":button") |
All input elements with type="button" Selects only button elements (input[type=submit],
input[type=reset], input[type=button], or button). |
| :checkbox |
$(":checkbox") |
All input elements with type="checkbox" Selects only checkbox elements (input[type=checkbox]). |
| :checked |
$(":checked") |
All checked input elements |
| :contains(text) |
$(":contains('W3Schools')") |
All elements which contains the text |
| :disabled |
$(":disabled") |
All disabled input elements |
| :empty |
$(":empty") |
All elements with no child (elements) nodes |
| :enabled |
$(":enabled") |
All enabled input elements |
| :eq(index) |
$("ul li:eq(3)") |
The fourth element in a list (index starts at 0) |
| :even |
$("tr:even") |
All even tr elements |
| :file |
$(":file") |
All input elements with type="file" |
| :first |
$("p:first") |
The first p element |
| :gt(no) |
$("ul li:gt(3)") |
List elements with an index greater than 3 |
| :has(selector) |
|
Selects only elements that contain at least one element that matches the specified selector. |
| :header |
$(":header") |
All header elements h1, h2 ... |
| :hidden |
$("p:hidden") |
All hidden p elements |
| :image |
$(":image") |
All input elements with type="image" |
| :input |
$(":input") |
All input elements |
| :last |
$("p:last") |
The last p element |
| :lt(no) |
$("ul li:lt(3)") |
List elements with an index less than 3 |
| :odd |
$("tr:odd") |
All odd tr elements |
| :not(selector) |
$("input:not(:empty)") |
All input elements that are not empty |
| :parent |
|
Selects only elements that have children (including text), but not empty elements. |
| :password |
$(":password") |
All input elements with type="password" |
| :radio |
$(":radio") |
All input elements with type="radio" |
| :reset |
$(":reset") |
All input elements with type="reset" |
| :selected |
$(":selected") |
All selected input elements |
| :submit |
$(":submit") |
All input elements with type="submit" |
| :text |
$(":text") |
All input elements with type="text" |
| :visible |
$("table:visible") |
All visible tables |
alignment-adjust : Allows more precise alignment of elements; CSS3
alignment-baseline : Specifies how an inline-level element is aligned with respect to its parent; CSS3
baseline-shift : Allows repositioning of the dominant-baseline relative to the dominant-baseline; CSS3
dominant-baseline : Specifies a scaled-baseline-table; CSS3
drop-initial-after-adjust : Sets the alignment point of the drop initial for the primary connection point; CSS3
drop-initial-after-align : Sets which alignment line within the initial line box is used at the primary connection point with the initial letter box; CSS3
drop-initial-before-adjust : Sets the alignment point of the drop initial for the secondary connection point; CSS3
drop-initial-before-align : Sets which alignment line within the initial line box is used at the secondary connection point with the initial letter box; CSS3
drop-initial-size : Controls the partial sinking of the initial letter; CSS3
drop-initial-value : Activates a drop-initial effect; CSS3.
inline-box-align : Sets which line of a multi-line inline block align with the previous and next inline elements within a line; CSS3
line-stacking : A shorthand property for setting the line-stacking-strategy, line-stacking-ruby, and line-stacking-shift properties; CSS3
line-stacking-ruby : Sets the line stacking method for block elements containing ruby annotation elements; CSS3
line-stacking-shift : Sets the line stacking method for block elements containing elements with base-shift; CSS3
line-stacking-strategy : Sets the line stacking strategy for stacked line boxes within a containing block element; CSS3
text-height : Sets the block-progression dimension of the text content area of an inline box; CSS3
list-style : The list-style shorthand property sets all the list properties in one declaration. The properties that can be set, are (in order): list-style-type, list-style-position, list-style-image. If one of the values above are missing, e.g. "list-style:circle inside;", the default value for the missing property will be inserted, if any. See
CSS Lists. CSS1.
- JavaScript syntax : object.style.listStyle="decimal inside"
- list-style-type
- list-style-position
- list-style-image
list-style-type : Sets the type of the list-item marker; CSS1.
- none
- disc
- circle
- square
- decimal
- decimal-leading-zero
- lower-roman
- upper-roman
- lower-alpha
- upper-alpha
- lower-greek
- lower-latin
- upper-latin
- hebrew
- armenian
- georgian
- cjk-ideographic
- hiragana
- katakana
- hiragana-iroha
- katakana-iroha
margin :
A shorthand property for setting the margin properties in one declaration; CSS1.
- margin: [top] [right] [bottom] [left]
- margin: [top] [right/left] [bottom]
- margin: [top/bottom] [right/left]
- margin: [allfour]
- margin-top, margin-right, margin-bottom, margin-left
marquee-direction : Sets the direction of the moving content; CSS3
marquee-play-count : Sets how many times the content move; CSS3
marquee-speed : Sets how fast the content scrolls; CSS3
marquee-style : Sets the style of the moving content; CSS3
column-count :
Specifies the number of columns an element should be divided into; CSS3
column-gap :
Specifies the gap between the columns; CSS3
column-rule :
A shorthand property for setting all the column-rule-* properties; CSS3
column-span :
Specifies how many columns an element should span across; CSS3
columns : A shorthand property for setting column-width and column-count; CSS3
padding : A shorthand property for setting all of the padding properties in one declaration; CSS1.
- padding:[top] [right] [bottom] [left]
- padding:[top] [right_left] [bottom]
- padding:[top_bottom] [right_left]
- padding:[all_four]
- Note: Negative values are not allowed.
fit : Gives a hint for how to scale a replaced element if neither its width nor its height property is auto; CSS3
fit-position : Determines the alignment of the object inside the box; CSS3
image-orientation : Specifies a rotation in the right or clockwise direction that a user agent applies to an image; CSS3
page : Specifies a particular type of page where an element SHOULD be displayed; CSS3
size : Specifies the size and orientation of the containing box for page content; CSS3
position : Specifies the type of positioning method used for an element (static, relative, absolute or fixed); CSS2.
- static: Default. No position, the element occurs in the normal flow (ignores any top,
bottom, left, right, or z-index declarations)
- absolute: Generates an absolutely positioned element, positioned relative to the
first parent element that has a position other than static. The element's position is specified
with the "left", "top", "right", and "bottom" properties
- fixed: Generates an absolutely positioned element, positioned relative to the
browser window. The element's position is specified with the "left", "top", "right",
and "bottom" properties
- relative: Generates a relatively positioned element, positioned relative to its
normal position, so "left:20" adds 20 pixels to the element's LEFT position
bottom : Sets how far the bottom edge of an element is above/below the bottom edge of the parent element; CSS2.
clip : The clip property lets you specify the dimensions of an absolutely positioned element that should be visible, and the element is clipped into this shape, and displayed. CSS2.
- JavaScript syntax: object.style.clip="rect(0px,50px,50px,0px)"
- shape : Clips an element. The only valid value is: rect (top, right, bottom, left)
- auto
left :
Sets how far the left edge of an element is to the right/left of the left edge of the parent element; CSS2.
overflow :
Sets what happens if the content of an element overflow its area (box); CSS2.
- visible: The overflow is not clipped. It renders outside the element's box. This is default
- hidden: The overflow is clipped, and the rest of the content will be invisible
- scroll: The overflow is clipped, but a scroll-bar is added to see the rest of the content
- auto: If overflow is clipped, a scroll-bar should be added to see the rest of the content
- inherit: Specifies that the value of the overflow property should be inherited from the parent element
right : Sets how far the right edge of an element is to the left/right of the right edge of the parent element; CSS2.
top : Sets how far the top edge of an element is above/below the top edge of the parent element; CSS2.
z-index :
Sets the stack order of an element; CSS2
clear :
Specifies which sides of an element where other floating elements are not allowed; CSS1
cursor : Specifies the type of cursor to be displayed; CSS2
display : Specifies the type of box an element should generate; CSS1.
float : Specifies whether or not a box should float. CSS1
visibility :
Specifies whether or not an element is visible; CSS2.
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; CSS2
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; CSS2
ruby-align : Controls the text alignment of the ruby text and ruby base contents relative to each other; CSS3
ruby-overhang : Determines whether, and on which side, ruby text is allowed to partially overhang any adjacent text in addition to its own base, when the ruby text is wider than the ruby base; CSS3
ruby-position : Controls the position of the ruby text with respect to its base; CSS3
ruby-span : Controls the spanning behavior of annotation elements; CSS3
| Selector |
Example |
Example description |
CSS |
| * |
* |
Selects all elements |
2 |
| element |
p |
Selects all <p> elements |
1 |
|
element element
|
div p |
Selects all <p> elements inside <div> elements |
1 |
| element,element |
div,p |
Selects all <div> elements and all <p> 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 that are placed immediately after <div> elements |
2 |
|
element1~element2
|
p~ul |
Selects every ul element that are preceded by a p element |
3 |
| .class |
.intro |
Selects all elements with class="intro" |
1 |
| #id |
#firstname |
Selects the element with id="firstname" |
1 |
| [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 whose title attribute CONTAINS THE WORD "flower" |
2 |
|
[attribute*=value]
|
a[src*="w3schools"] |
Selects every a element whose src attribute value
CONTAINS THE SUBSTRING "w3schools" |
3 |
|
[attribute|=language]
|
[lang|=en] |
Selects all elements whose lang attribute value BEGINS WITH THE WORD "en" |
2 |
|
[attribute^=value]
|
a[src^="https"] |
Selects every a element whose src attribute value BEGINS WITH THE SUBSTRING "https" |
3 |
|
[attribute$=value]
|
a[src$=".pdf"] |
Selects every a element whose src attribute value ENDS WITH THE SUBSTRING ".pdf" |
3 |
| E[A!=V] |
input[type!="radio"] |
Matches all elements with tag name E that have attribute A whose value doesn’t match the value V, or that lack attribute A completely. |
jquery |
| :active |
a:active |
Selects the active link |
1 |
| :after |
p:after |
Insert content after every <p> element |
2 |
| :animated |
$(":animated") |
All animated elements |
jquery |
| :before |
p:before |
Insert content before every <p> element |
2 |
| :checked |
input:checked |
Selects every input element that is currently in a checked state |
3 |
| :disabled |
input:disabled |
Selects every disabled input element |
3 |
| :empty |
p:empty |
Selects every p element that has no children (including text nodes) |
3 |
| :enabled |
input:enabled |
Selects every enabled input element |
3 |
| :eq(n) |
Matches the nth matching element. |
jquery |
| :even |
Matches even elements within the context. li:even returns every even list item. |
jquery |
| :first |
Matches the first match within the context. li a:first returns the first link that’s a descendant of a list item. |
jquery |
| :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 |
| :first-of-type |
p:first-of-type |
Selects every p element that is the first p element of its parent |
3 |
| :focus |
input:focus |
Selects the input element which has focus |
2 |
| :gt(n) |
Matches matching elements after and excluding the nth matching element. |
jquery |
| :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 |
| :last |
li a:last |
Matches the last match within the context. li a:last returns the last
link that’s a descendant of a list item. |
| :last-child |
p:last-child |
Selects every p element that is the last child of its parent |
3 |
| :last-of-type |
p:last-of-type |
Selects every p element that is the last p element of its parent |
3 |
| :link |
a:link |
Selects all unvisited links |
1 |
| :lt(n) |
Matches matching elements before and excluding the nth matching element. |
jquery |
| :not(selector) |
:not(p) |
Selects every element that is not a p element |
3 |
| :nth-child(n) |
p:nth-child(2) |
Selects every p element that is the 2nd child of its parent (Starts at 1, not 0). |
3 |
| :nth-child(even|odd) |
Matches even or odd children within the context. li:nthchild(even) returns the even list items of each list. |
jquery |
| :nth-child(Xn+Y) |
Matches the nth child element computed by the supplied formula. If Y is 0, it may be omitted. li:nth-child(3n) returns every third list item, whereas li:nth-child(5n+1) returns the item after every fifth element. |
jquery |
|
:nth-last-child(n)
|
p:nth-last-child(2) |
Selects every p element that is the 2nd child of its parent, counting from the last child |
3 |
|
:nth-last-of-type(n)
|
p:nth-last-of-type(2) |
Selects every p element that is the 2nd p element of its parent, counting
from the last child |
3 |
| :nth-of-type(n) |
p:nth-of-type(2) |
Selects every p element that is the 2nd p element of its parent |
3 |
| :odd |
Matches odd elements within the context. li:odd returns every odd list item. |
jquery |
| :only-child |
p:only-child |
Selects every p element that is the only child of its parent (has no siblings). |
3 |
| :only-of-type |
p:only-of-type |
Selects every p element that is the only p element of its parent |
3 |
| :root |
:root |
Selects the document’s root element |
3 |
| ::selection |
::selection |
Selects the portion of an element that is selected by a user |
3 |
| :target |
#news:target |
Selects the current active #news element (clicked on a URL containing that anchor name) |
3 |
| :visited |
a:visited |
Selects all visited links |
1 |
mark : A shorthand property for setting the mark-before and mark-after properties; CSS3
mark-after : Allows named markers to be attached to the audio stream; CSS3
mark-before : Allows named markers to be attached to the audio stream; CSS3
phonemes : Specifies a phonetic pronunciation for the text contained by the corresponding element; CSS3
rest : A shorthand property for setting the rest-before and rest-after properties; CSS3
rest-after : Specifies a rest or prosodic boundary to be observed after speaking an element's content; CSS3
rest-before : Specifies a rest or prosodic boundary to be observed before speaking an element's content; CSS3
voice-balance : Specifies the balance between left and right channels; CSS3
voice-duration : Specifies how long it should take to render the selected element's content; CSS3
voice-pitch : Specifies the average pitch (a frequency) of the speaking voice; CSS3
voice-pitch-range : Specifies variation in average pitch; CSS3
voice-rate : Controls the speaking rate; CSS3
voice-stress : Indicates the strength of emphasis to be applied; CSS3
voice-volume : Refers to the amplitude of the waveform output by the speech synthesises; CSS3
border-collapse : Sets whether the table borders are collapsed into a single border or detached as in standard HTML; CSS2.
- collapse: Borders are collapsed into a single border when possible (border-spacing
and empty-cells properties will be ignored)
- separate: Borders are detached (border-spacing and empty-cells properties will
not be ignored). This is default
- inherit: Specifies that the value of the border-collapse property should be
inherited from the parent element
border-spacing : Specifies the distance between the borders of adjacent cells (only for the "separated borders" model); CSS2.
- length length: Specifies the distance between the borders of adjacent cells in px, cm, etc. Negative values are not allowed.
If one length value is specified, it specifies both the horizontal and vertical spacing
If two length values are specified, the first sets the horizontal spacing and the second sets the vertical spacing
- inherit: Specifies that the value of the border-spacing property should be inherited from the parent element
caption-side :
Specifies the placement of a table caption; CSS2.
empty-cells :
Specifies whether or not to display borders and background on empty cells in a table (only for the "separated borders" model); CSS2.
table-layout :
Sets the algorithm used to display the table cells, rows, and columns; CSS2.
color :
Sets the color of a text; CSS1.
direction :
Specifies the text direction/writing direction; CSS2.
letter-spacing : Increases or decreases the space between characters in a text; CSS1.
text-align :
Specifies the horizontal alignment of text; CSS1.
- left
- right
- center
- justify
text-decoration : Specifies the decoration added to text; CSS1.
- none
- underline
- overline
- line-through
- blink
text-indent :
Specifies the indentation of the first line in a text-block; CSS1.
text-transform : Controls the capitalization of text; CSS1.
- none
- capitalize
- uppercase
- lowercase
unicode-bidi : CSS2.
- normal
- embed
- bidi-override
vertical-align : Sets the vertical alignment of an element; CSS1.
- baseline
- sub
- super
- top
- text-top
- middle
- bottom
- text-bottom
- length
- %
white-space : Sets how white space inside an element is handled; CSS1.
word-spacing : Increase or decrease the space between words in a text; CSS1.
hanging-punctuation : Specifies whether a punctuation character may be placed outside the line box; CSS3
punctuation-trim : Specifies whether a punctuation character should be trimmed; CSS3
text-align-last : Describes how the last line of a block or a line right before a forced line break is aligned when text-align is "justify"; CSS3
text-justify : Specifies the justification method used when text-align is "justify"; CSS3
text-overflow : Specifies what should happen when text overflows the containing element; CSS3
text-wrap : Specifies line breaking rules for text; CSS3
word-break :
Specifies line breaking rules for non-CJK scripts; CSS3
word-wrap : Allows long, unbreakable words to be broken and wrap to the next line; CSS3
transform : Applies a 2D or 3D transformation to an element; CSS3
transform-origin : Allows you to change the position on transformed elements; CSS3
transform-style : Specifies how nested elements are rendered in 3D space; CSS3
perspective : Specifies the perspective on how 3D elements are viewed; CSS3
backface-visibility : Defines whether or not an element should be visible when not facing the screen; CSS3
transition : A shorthand property for setting the four transition properties; CSS3
transition-property : Specifies the name of the CSS property the transition effect is for; CSS3
transition-duration : Specifies how many seconds or milliseconds a transition effect takes to complete; CSS3
appearance : Allows you to make an element look like a standard user interface element; CSS3
box-sizing :
Allows you to define certain elements to fit an area in a certain way; CSS3
icon : Provides the author the ability to style an element with an iconic equivalent; CSS3
nav-down : Specifies where to navigate when using the arrow-down navigation key; CSS3
nav-index : Specifies the tabbing order for an element; CSS3
nav-left : Specifies where to navigate when using the arrow-left navigation key; CSS3
nav-right : Specifies where to navigate when using the arrow-right navigation key; CSS3
nav-up : Specifies where to navigate when using the arrow-up navigation key; CSS3
outline-offset : Offsets an outline, and draws it beyond the border edge; CSS3
resize : Specifies whether or not an element is resizable by the user; CSS3