CSS Grammar Summary

Using * (the asterisk) applies the rule to all elements.

* { color: red; margin: 0;}

<div>This is a div element.</div>
<p>This is a p element.</p>

Applies to all elements matching the specified element name (tag name). Think of it as: if there is no # or . prefix, it is treated as an element name.

div { color: red;} /* Applies to all div elements. */
p { color: blue; margin: 0;} /* Applies to all p elements. */

<div>This is a div element.</div>
<div>This is a div element.</div>
<p>This is a p element.</p>
<p>This is a p element.</p>

Using #id-name applies the rule to elements with the specified id.

#hoge { color: red;} /* Applies to elements with the id "hoge". */
p#hoge1 { color: blue;} /* Applies to p elements with the id "hoge1". */

<div id="hoge">This is a div element with id "hoge".</div>
<div>This is a div element.</div>
<p id="hoge1">This is a p element with id "hoge1".</p>
<p>This is a p element.</p>

Using .class-name applies the rule to elements with the specified class.

You can also chain class names like .class-name.class-name to target elements that have all of the specified classes. For example, .hoge.hoge1 matches elements that have both the hoge and hoge1 classes. Note that chained class names must be written without any spaces between them.

.hoge { color: red;} /* Applies to elements with the class "hoge". */
p.hoge1 { color: blue;} /* Applies to p elements with the class "hoge1". */
.hoge2.hoge3 { color: orange;} /* Applies to elements with both the "hoge2" and "hoge3" classes. */

<div class="hoge">This is a div element with class "hoge".</div>
<div class="hoge1">This is a div element with class "hoge1".</div>
<div>This is a div element.</div>
<p class="hoge">This is a p element with class "hoge".</p>
<p class="hoge1">This is a p element with class "hoge1".</p>
<p class="hoge1">This is a p element with class "hoge1".</p>
<p class="hoge2">This is a p element with class "hoge2".</p>
<p class="hoge2 hoge3">This is a p element with classes "hoge2" and "hoge3".</p>
<p>This is a p element.</p>

Separating selectors with a space applies the rule to all descendant elements of the specified element.

p span { color: red;} /* Applies to all span elements inside a p element. */
.hoge p { color: blue;} /* Applies to all p elements inside an element with class "hoge". */
div * { color: orange;} /* Applies to all elements inside a div element. */

<p>This is a p element. <span>This is a span element inside a p element.</span></p>
<div class="hoge">
	<p>This is a p element inside a div with class "hoge".</p>
</div>
<div class="hoge">
	<div>This is a div element inside a div with class "hoge".</div>
</div>
<div>This is a div element. <span>This is a span element inside a div element.</span></div>

Using > applies the rule only to direct child elements of the specified element.

div.hoge > div { color: red;} /* Applies only to div elements that are direct children of a div with class "hoge". */
div { color: blue;}

<div class="hoge">
	<div>This is a div inside the div with class "hoge".</div>
	<div>
		<div>This is a div nested deeper inside "div.hoge". It is not a direct child, so it will not be red.</div>
	</div>
</div>

Using + (plus) applies the rule only to the immediately following sibling element. Note that despite being called the "adjacent sibling selector," it does not apply to the preceding sibling — only to the element that immediately follows. Also note that this does not work in IE6 and below.

h2 + p { color: red;} /* Applies only to the p element immediately following an h2 element. */

<p>This is a p element. It comes before h2, so it will not be red.</p>
<h2>This is an h2 element.</h2>
<p>This is a p element.</p>
<p>This is a p element.</p>

Using ~ (tilde) applies the rule to all following sibling elements. This is commonly called the "general sibling selector." It applies to elements that share the same parent and come after the specified element. Note that this does not work in IE6 and below.

h2 ~ p { color: red;} /* Applies to all p elements that are siblings following an h2 element. */

<p>This is a p element.</p>
<h2>This is an h2 element.</h2>
<p>This is a p element.</p>
<p>This is a p element.</p>

Using selector[attribute-name] applies the rule only to elements that have the specified attribute. This is commonly called an "attribute selector." The attribute value does not matter — the element just needs to have the attribute. Note that this does not work in IE6 and below.

p[id] { color: red;} /* Applies to all p elements that have an id attribute. */
p[title] { color: blue;} /* Applies to all p elements that have a title attribute. */
[class] { color: orange;} /* Applies to all elements that have a class attribute. Equivalent to "*[class]". */

<p id="hoge">This is a p element with id "hoge".</p>
<p>This is a p element.</p>
<p title="">This is a p element with a title attribute, but the value is empty.</p>
<p>This is a p element.</p>

Using selector[attribute-name=value] applies the rule only to elements where the attribute value is an exact match. Does not work in IE6 and below.

If the value contains no spaces, you can write it as-is: div[title=hoge].

If the value contains spaces, you must wrap it in quotes: div[title="hoge hoge1"].

p[id=hoge] { color: red;} /* Applies to p elements whose id attribute is exactly "hoge". */
p[title=hoge1] { color: blue;} /* Applies to p elements whose title attribute is exactly "hoge1". */
[class="hoge2 "] { color: orange;} /* Applies to elements whose class attribute is exactly "hoge2 " (including the trailing space). */
[title=Miku] { color: green;} /* Non-ASCII values are also supported. */

<p id="hoge">This is a p element with id "hoge".</p>
<p title="hoge1">This is a p element with title "hoge1".</p>
<p title="hoge1 ">This is a p element with title "hoge1 " (trailing space). It will not be blue because the value does not match exactly.</p>
<p class="hoge2 ">This is a p element with class "hoge2 " (trailing space).</p>
<p class="hoge2 hoge3">This is a p element with class "hoge2 hoge3".</p>
<p title="Miku">This is a p element with title "Miku".</p>

Using selector[attribute-name~=value] applies the rule only to elements where the attribute value contains the specified word as a whitespace-separated token. Does not work in IE6 and below.

For example, if the value is hoge hoge1, this selector matches elements where the word hoge or hoge1 appears as one of the space-separated tokens.

Although you can include spaces in the selector value using quotes, since this selector compares whitespace-delimited words, values containing spaces will not reliably identify elements. Use caution.

p[title~=hoge] { color: red;} /* Applies to p elements whose title contains "hoge" as a whitespace-separated word. */
p[title~="hoge1"] { font-size: 20px;} /* Applies to p elements whose title contains "hoge1" as a whitespace-separated word. */
[title~=Miku] { color: green;} /* Non-ASCII values are also supported. */

<p title="hoge">This is a p element with title "hoge".</p>
<p title="hoge hoge1">This is a p element with title "hoge hoge1".</p>
<p title="Miku IA">This is a p element with title "Miku IA".</p>

Using selector[attribute-name|=value] applies the rule only to elements where the first hyphen-separated segment of the attribute value is an exact match. Does not work in IE6 and below.

For example, if the value is hoge-hoge1, this selector matches the word hoge — the part before the first hyphen. Values like hoge1-hoge2 hoge3 would match hoge1 in the same way.

p[title|=hoge] { color: red;} /* Applies to p elements whose title's first hyphen-separated segment is "hoge". */
p[title|=hoge1] { color: blue;} /* Applies to p elements whose title's first hyphen-separated segment is "hoge1". */
[title|=Miku] { color: green;} /* Non-ASCII values are also supported. */

<p title="hoge">This is a p element with title "hoge".</p>
<p title="hoge1-hoge2 hoge3">This is a p element with title "hoge1-hoge2 hoge3".</p>
<p title="Miku-IA">This is a p element with title "Miku-IA".</p>

Using selector[attribute-name^=value] applies the rule only to elements where the attribute value begins with the specified string. Does not work in IE6 and below.

For example, for the value function, this selector would match strings like fu, func, or funct.

p[title^=hoge] { color: red;} /* Applies to p elements whose title attribute starts with "hoge". */
p[title^=hoge1] { color: blue;} /* Applies to p elements whose title attribute starts with "hoge1". */
[title^=Miku] { color: green;} /* Non-ASCII values are also supported. */

<p title="hoge">This is a p element with title "hoge".</p>
<p title="hoge1hoge fuga">This is a p element with title "hoge1hoge fuga".</p>
<p title="Miku and IA">This is a p element with title "Miku and IA".</p>

Using selector[attribute-name$=value] applies the rule only to elements where the attribute value ends with the specified string. Does not work in IE6 and below.

For example, for the value function, this selector would match strings like on, tion, or nction.

p[title$=hoge] { color: red;} /* Applies to p elements whose title attribute ends with "hoge". */
p[title$=hoge1] { color: blue;} /* Applies to p elements whose title attribute ends with "hoge1". */
[title$=Miku] { color: green;} /* Non-ASCII values are also supported. */

<p title="hoge">This is a p element with title "hoge".</p>
<p title="hoge hogehoge1">This is a p element with title "hoge hogehoge1".</p>
<p title="IA and Miku">This is a p element with title "IA and Miku".</p>

Using selector[attribute-name*=value] applies the rule only to elements where the attribute value contains the specified substring. Does not work in IE6 and below.

For example, for the value function, this selector would match substrings like fu, unc, or ncti.

p[title*=hoge] { color: red;} /* Applies to p elements whose title contains the substring "hoge". */
p[title*=hoge1] { color: blue;} /* Applies to p elements whose title contains the substring "hoge1". */
[title*=Miku] { color: green;} /* Non-ASCII values are also supported. */

<p title="hoge">This is a p element with title "hoge".</p>
<p title="hogehoge1 fuga">This is a p element with title "hogehoge1 fuga".</p>
<p title="Miku and IA">This is a p element with title "Miku and IA".</p>

Using selector:not(selector) applies the rule to elements that do not match the specified selector. Does not work in IE8 and below.

Write the selector you want to exclude inside :not(). To exclude a specific selector from all elements, use *:not(selector) — the * can be omitted, so :not(selector) works too. Attribute selectors can also be used inside :not(). However, only simple selectors are allowed inside :not() — descendant or sibling combinators (such as spaces, >, or +) are not supported.

You can chain multiple :not() calls to apply multiple conditions: :not(selector1):not(selector2).

Note that applying :not() to all elements (:not() or *:not()) is known to have bugs in some browsers where the style is not applied.

p:not(.hoge) { color: blue;} /* Makes p elements that do not have the class "hoge" blue. */
p:not([class]) { font-size: 20px;} /* Sets the font size of p elements that have no "class" attribute to 20px. */
div:not([class]):not([id]) { background-color: yellow;} /* Gives a yellow background to div elements that have neither a class nor an id. */
div:not(p span) { background-color: blue;} /* Only simple selectors are allowed inside :not(), so this rule will not apply. */

<p>This is a p element.</p>
<p class="hoge">This is a p element with class "hoge".</p>
<div>This is a div element.</div>
<div class="miku">This is a div element with class "miku".</div>
<div id="miku">This is a div element with id "miku".</div>

Using selector:hover applies the rule only while the mouse is hovering over the element. This is commonly called a "pseudo-class" (:hover pseudo-class). On touch devices, it may trigger briefly when tapping, but since this is designed for mouse cursors, it is best to avoid using it on touch-only interfaces.

The CSS styles apply while the mouse is hovering over the element, and revert when the mouse moves away. Unlike JavaScript hover event handlers, you do not need to write separate code to restore the original styles.

Be aware of potential conflicts with other pseudo-classes and their order. Writing them in the order :link, :visited, :hover, :active (the "LVHA" order) avoids conflicts.

div:hover { color: red;} /* Makes the text of a div element red while it is hovered. */
p:hover { color: blue;} /* Makes the text of a p element blue while it is hovered. */
p:hover span { color: orange;} /* Makes the text of a span inside a p element orange while the p is hovered. */
*:hover { font-size: 20px;} /* Enlarges the text of any element while it is hovered. */

<div>This is a div element.</div>
<p>This is a p element.</p>
<p>This is a p element. <span>This is a span element inside the p element.</span></p>

Using selector:active applies the rule only while the element is being clicked. This is commonly called a "pseudo-class" (:active pseudo-class). On touch devices, behavior varies by device, so it is best to avoid relying on it.

The CSS styles apply while the element is being clicked, and revert when the click is released. The styles also apply while the element is selected using the Tab key.

Be aware of potential conflicts with other pseudo-classes and their order. Writing them in the order :link, :visited, :hover, :active (the "LVHA" order) avoids conflicts.

div:active { color: red;} /* Makes the text of a div element red while it is being clicked. */
p:active { color: blue;} /* Makes the text of a p element blue while it is being clicked. */
p:active span { color: orange;} /* Makes the text of a span inside a p element orange while the p is being clicked. */
*:active { font-size: 20px;} /* Enlarges the text of any element while it is being clicked. */

<div>This is a div element.</div>
<p>This is a p element.</p>
<p>This is a p element. <span>This is a span element inside the p element.</span></p>

Using selector:link applies the rule to elements that have a link destination. Since this applies to elements with a link target, it is mainly used with a elements. This is commonly called a "pseudo-class" (:link pseudo-class).

Be aware of potential conflicts with other pseudo-classes and their order. Writing them in the order :link, :visited, :hover, :active (the "LVHA" order) avoids conflicts.

The :link pseudo-class should be placed before other pseudo-classes. It applies to elements that have a link destination — not just unvisited links — so it must come before :visited.

a:link { color: red;} /* When separating styles for visited and unvisited links, always write :link before :visited. */
a:visited { color: orange;}

In practice, you can think of this as applying to a elements that have an href attribute.

Note: Clear your browser history before trying the sample below.

a:link { color: red;} /* Sets the text color of a elements with a link destination to red. */

<p><a target="_blank" href="https://www.google.co.jp/">Go to Google.</a></p>
<p><a>This is an a element without an href attribute, so it will not be red.</a></p>

Using selector:visited applies the rule to elements whose link destination has been visited. Since this applies to elements with a link target, it is mainly used with a elements. This is commonly called a "pseudo-class" (:visited pseudo-class).

Be aware of potential conflicts with other pseudo-classes and their order. Writing them in the order :link, :visited, :hover, :active (the "LVHA" order) avoids conflicts.

The :visited pseudo-class must be placed after :link.

a:link { color: red;}
a:visited { color: orange;} /* When separating styles for visited and unvisited links, always write :visited after :link. */

Note: Clear your browser history before trying the sample below.

a:visited { color: red;} /* Sets the text color of visited a elements to red. */

<p><a target="_top" href="https://www.google.co.jp/">Go to Google. The color will change after you visit the page and come back.</a></p>

Using selector:target applies the rule to elements whose id matches the hash portion of the current URL. The "hash" (also called fragment or anchor) is the part of the URL after #. For example, in http://wp-p.info/index.html#hoge, the hash is hoge. This is commonly called a "pseudo-class" (:target pseudo-class). Does not work in IE8 and below.

p:target { color: red;} /* Turns the text of a p element red when its id matches the URL hash. */

<a href="#hoge_sample">Click here to change the text color.</a>
<p id="hoge_sample">The color will change.</p>

Using selector:focus applies the rule to elements that are currently focused. A focused element is one that is active for input, such as a form field being typed into or an element selected via the Tab key. This is commonly called a "pseudo-class" (:focus pseudo-class).

input:focus { background-color: yellow;} /* Sets the background color of a focused input element to yellow. */

<p>The background changes while you type: <input type="text"></p>

Using selector:enabled applies the rule to enabled elements, and selector:disabled applies to disabled elements. These are commonly called "UI state pseudo-classes." Does not work in IE8 and below.

<input type="button" value="This is a button." disabled> <!-- Specify the disabled attribute like this. -->
<input type="button" value="This is a button." disabled="disabled"> <!-- In XHTML, attribute values cannot be omitted, so write "disabled="disabled"". -->

An enabled element is one that is active and usable; a disabled element is inactive and cannot be interacted with. These are mainly used with a, input, and button elements.

input:disabled { color: white; background-color: gray;} /* Makes disabled input elements have white text on a gray background. */
input:enabled { color: blue;} /* Makes enabled input elements have blue text. */

<input type="button" value="This button is disabled." disabled>
<input type="button" value="This is a button.">

Using selector:checked applies the rule to elements that are checked. This is commonly called a "UI state pseudo-class." Does not work in IE8 and below.

Since it applies to checked elements, it is mainly used with <input type="checkbox"> (checkboxes) and <input type="radio"> (radio buttons).

input:checked + p { color: red;} /* Turns the sibling p element red when the input is checked. */

<input type="checkbox">
<p>The color changes when checked.</p>
<input type="radio">
<p>The color changes when checked.</p>

Using selector:first-line applies the rule to the first rendered line of an element. This is commonly called a "pseudo-element." Does not work in IE8 and below.

Note that this applies to the first line as rendered in the browser, not the first line of the source code. Also, :first-line only works on elements whose display value is block, inline-block, table-cell, table-caption, etc. It does not apply to inline elements.

p:first-line { color: red;} /* Makes the first rendered line red. */

<p>
	The first rendered line will be red.
	Note that this is not the first line of the source code.<br>
</p>

Using selector:first-letter applies the rule to the first letter of the first rendered line of an element. This is commonly called a "pseudo-element." Does not work in IE8 and below.

Note that this applies to the first letter of the first line as rendered in the browser, not the first letter in the source code. It also does not apply if an img element appears before the first letter. Additionally, :first-letter only works on elements whose display value is block, inline-block, table-cell, table-caption, etc. It does not apply to inline elements.

p:first-letter { color: red;} /* Makes the first letter of the first rendered line red. */

<p>
	The first letter of the first rendered line will be red.
	Note that this is not the first letter of the first line in the source code.<br>
</p>

Using selector:before generates a pseudo-element as the first child of the specified element. This is commonly called the ":before pseudo-element." Does not work in IE7 and below.

To generate a :before pseudo-element, the content property is required. If content is not specified, no pseudo-element is generated. To generate an empty :before pseudo-element, pass an empty string to the content property.

div:before { content: "Hello World";} /* Generates a :before pseudo-element containing the text "Hello World". */
p:before {} /* No :before pseudo-element is generated because the content property is not specified. */
div.div1:before { content: ""; display: block; height: 10px; background-color: red;} /* Pass an empty string to generate a pseudo-element with no text content. */

<div> A :before pseudo-element has been generated.</div>
<p>No :before pseudo-element is generated because the content property is not specified.</p>
<div class="div1">A red line has been generated using the :before pseudo-element.</div>

The default display value of a :before pseudo-element is inline.

Note that the :before pseudo-element is generated inside the specified element, as the first child — not before the element itself.

<!-- Not here -->
<p>
<!-- The :before pseudo-element is generated around here. -->

</p>

Using selector:after generates a pseudo-element as the last child of the specified element. This is commonly called the ":after pseudo-element." Does not work in IE7 and below.

To generate an :after pseudo-element, the content property is required. If content is not specified, no pseudo-element is generated. To generate an empty :after pseudo-element, pass an empty string to the content property.

div:after { content: "Hello World";} /* Generates an :after pseudo-element containing the text "Hello World". */
p:after {} /* No :after pseudo-element is generated because the content property is not specified. */
div.div1:after { content: ""; display: block; height: 10px; background-color: red;} /* Pass an empty string to generate a pseudo-element with no text content. */

<div> An :after pseudo-element has been generated.</div>
<p>No :after pseudo-element is generated because the content property is not specified.</p>
<div class="div1">A red line has been generated using the :after pseudo-element.</div>

The default display value of an :after pseudo-element is inline.

Note that the :after pseudo-element is generated inside the specified element, as the last child — not after the element itself.

<p>

<!-- The :after pseudo-element is generated around here. -->
</p>
<!-- Not here -->

Using :root targets the root element of the HTML document. This is equivalent to the html selector, but :root has higher specificity. Does not work in IE8 and below.

A common use case for :root is boosting CSS specificity without using !important. If you are struggling with specificity conflicts, prepending :root to your selector can help resolve them.

:root { background-color: yellow;} /* :root has higher specificity, so the background will be yellow. */
html { background-color: blue;} /* This rule will not apply because :root has higher specificity. */
:root p { color: red;} /* Use this to boost specificity without !important. */
p { color: blue;} /* This rule will not apply because ":root p" has higher specificity. */

<p>This is a p element.</p>

Using selector:first-child applies the rule to the first child element. This is commonly called a "pseudo-class." It is equivalent to :nth-child(1). Does not work in IE7 and below.

To target all first child elements, use *:first-child or just :first-child. Note that writing :first-child without a combinator like > targets the first child among all descendants. For example, div :first-child applies to the first child of every descendant inside the div. Text nodes (anonymous blocks) are ignored.

div.hoge :first-child { color: red;} /* Makes the first child of every descendant inside div.hoge red. */
div.hoge1 > :first-child { color: blue;} /* Makes the first direct child of div.hoge1 blue. */

<div class="hoge">This is a text node. Text nodes are ignored.
	<p>This is the first p element inside div.hoge.</p>
	<div>
		<p>This is the first p element inside the inner div inside div.hoge.</p>
		<p>This is the last p element inside the inner div inside div.hoge.</p>
	</div>
	<p>This is the last p element inside div.hoge.</p>
</div>
<div class="hoge1">
	<p>This is the first p element inside div.hoge1.</p>
	<div>
		<p>This is the first p element inside the inner div inside div.hoge1.</p>
		<p>This is the last p element inside the inner div inside div.hoge1.</p>
	</div>
	<p>This is the last p element inside div.hoge1.</p>
</div>

Note that when combining element name, id, class, or attribute selectors with :first-child, the browser first checks whether the element is the first child, and then checks whether it also matches the additional selector. For example, p.hoge:first-child only applies if the first child is a p element that also has the class hoge. Use :first-of-type if you need to narrow by element type instead.

div div.hoge:first-child { color: red;} /* Applies if the first descendant child is a div with class "hoge". */

<div>
	<div class="hoge">This is the first div with class "hoge" inside the div.</div>
	<div>
		<div>This is the first div inside the nested div.</div>
		<div>This is the last div inside the nested div.</div>
	</div>
	<div class="hoge">This is the last div with class "hoge" inside the div.</div>
</div>

Using selector:last-child applies the rule to the last child element. This is commonly called a "pseudo-class." It is equivalent to :nth-last-child(1). Does not work in IE7 and below.

To target all last child elements, use *:last-child or just :last-child. Note that writing :last-child without a combinator like > targets the last child among all descendants. For example, div :last-child applies to the last child of every descendant inside the div. Text nodes (anonymous blocks) are ignored.

div.hoge :last-child { color: red;} /* Makes the last child of every descendant inside div.hoge red. */
div.hoge1 > :last-child { color: blue;} /* Makes the last direct child of div.hoge1 blue. */

<div class="hoge">
	<p>This is the first p element inside div.hoge.</p>
	<div>
		<p>This is the first p element inside the inner div inside div.hoge.</p>
		<p>This is the last p element inside the inner div inside div.hoge.</p>
	</div>
	<p>This is the last p element inside div.hoge.</p>
	This is a text node. Text nodes are ignored.
</div>
<div class="hoge1">
	<p>This is the first p element inside div.hoge1.</p>
	<div>
		<p>This is the first p element inside the inner div inside div.hoge1.</p>
		<p>This is the last p element inside the inner div inside div.hoge1.</p>
	</div>
	<p>This is the last p element inside div.hoge1.</p>
</div>

Note that when combining element name, id, class, or attribute selectors with :last-child, the browser first checks whether the element is the last child, and then checks whether it also matches the additional selector. For example, p.hoge:last-child only applies if the last child is a p element that also has the class hoge. Use :last-of-type if you need to narrow by element type instead.

div div.hoge:last-child { color: red;} /* Applies if the last descendant child is a div with class "hoge". */

<div>
	<div class="hoge">This is the first div with class "hoge" inside the div.</div>
	<div>
		<div>This is the first div inside the nested div.</div>
		<div>This is the last div inside the nested div.</div>
	</div>
	<div class="hoge">This is the last div with class "hoge" inside the div.</div>
</div>

selector:nth-child(n) applies the rule to the nth child element. Does not work in IE8 and below.

The difference from :nth-of-type is whether other element types are counted. For example, p:nth-of-type(2) finds the 2nd p element regardless of other elements in between, whereas p:nth-child(2) only applies if the 2nd child (counting all element types) is actually a p element.

Sample Code

div p:nth-child(1) { color: red;} /* Makes the 1st p element (by child position) inside a div red. */

Browser Result

div p:nth-child(2) { color: red;} /* Makes the 2nd child p element inside a div red. */
div.hoge p:nth-child(2) { color: red;} /* The 2nd child inside div.hoge is not a p, so this does not apply. */

<div>
	<p>This is the 1st p element.</p>
	<p>This is the 2nd p element.</p>
</div>
<div class="hoge">
	<p>This is the 1st p element.</p>
	<div>This is the 1st div element.</div>
	<p>This is the 2nd p element.</p>
</div>

selector:nth-last-child(n) applies the rule to the nth child element counting from the last. It is equivalent to :first-child, :last-child, or :nth-child(1) in some cases, but has lower specificity than those selectors. Does not work in IE8 and below.

Sample Code

div p:nth-last-child(1) { color: red;} /* Makes the last p element (1st from the bottom) inside a div red. */
div.hoge :nth-last-child(2) { color: blue;} /* Makes the 2nd-to-last child inside div.hoge blue. */

Browser Result

div p:nth-last-child(1) { color: red;} /* Makes the last p element (1st from the bottom) inside a div red. */
div.hoge :nth-last-child(2) { color: blue;} /* Makes the 2nd-to-last child inside div.hoge blue. */
div.hoge1 :nth-last-child(3) { color: blue;} /* There is no 3rd-to-last child in div.hoge1, so this does not apply. */

<div>
	<p>This is the 1st p element.</p>
	<p>This is the 2nd p element.</p>
</div>
<div class="hoge">
	<div>This is the 1st div element.</div>
	<div>This is the 2nd div element.</div>
</div>
<div class="hoge1">
	<div>This is the 1st div element.</div>
	<div>This is the 2nd div element.</div>
</div>

Using selector:first-of-type applies the rule to the first child element of the same type. This is commonly called a "pseudo-class." It is equivalent to :nth-of-type(1). Does not work in IE8 and below.

The difference from :first-child is whether other element types are counted. For example, div:first-child does not apply if the first child is not a div element.

div div:first-child { color: red;} /* Applies only if the first child inside a div is a div element. */

<div>
	<p>This is a p element.</p>
	<div>This is a div element.</div>
	<p>This is a p element.</p>
	<div>This is a div element.</div>
</div>

By contrast, div:first-of-type counts only div elements among the children, making it much more reliable for targeting a specific element type.

div div:first-of-type { color: red;} /* Makes the first div element inside a div red. */

<div>
	<p>This is a p element.</p>
	<div>This is a div element.</div>
	<p>This is a p element.</p>
	<div>This is a div element.</div>
</div>

Note that when combining id, class, or attribute selectors with :first-of-type, the browser first identifies the first element by type, and then checks whether it also matches the additional selectors. For example, p.hoge:first-of-type applies only if the first p element among the children also has the class hoge. It does not target the first p with the class hoge.

div p.hoge:first-of-type { color: red;} /* Applies if the first p element inside a div also has the class "hoge". */

<div>
	<p class="hoge">This is the first p with class "hoge" inside the div.</p>
	<p class="hoge">This is the last p with class "hoge" inside the div.</p>
</div>
<div>
	<p>This is the first p element inside the div.</p>
	<p class="hoge">This is a p with class "hoge" inside the div.</p>
	<p class="hoge">This is a p with class "hoge" inside the div.</p>
	<p>This is the last p element inside the div.</p>
</div>

To target all first children of each element type, use *:first-of-type or just :first-of-type. This applies to the first element of each type among the children. For example, if there are both p and span elements among the children, the first p and the first span will each be targeted.

div :first-of-type { color: red;} /* Makes the first child of each element type inside the div red. */

<div>
	<div>This is a div element.</div>
	<p>This is a p element.</p>
	<div>This is a div element.</div>
	<p>This is a p element.</p>
</div>

Using selector:last-of-type applies the rule to the last child element of the same type. This is commonly called a "pseudo-class." It is equivalent to :nth-last-of-type(1). Does not work in IE8 and below.

The difference from :last-child is whether other element types are counted. For example, p:last-child does not apply if the last child is not a p element.

div p:last-child { color: red;} /* Applies only if the last child inside a div is a p element. */

<div>
	<p>This is a p element.</p>
	<div>This is a div element.</div>
	<p>This is a p element.</p>
	<div>This is a div element.</div>
</div>

By contrast, div:last-of-type counts only p elements among the children, making it much more reliable for targeting a specific element type.

div p:last-of-type { color: red;} /* Makes the last p element inside a div red. */

<div>
	<p>This is a p element.</p>
	<div>This is a div element.</div>
	<p>This is a p element.</p>
	<div>This is a div element.</div>
</div>

Note that when combining id, class, or attribute selectors with :last-of-type, the browser first identifies the last element by type, and then checks whether it also matches the additional selectors. For example, p.hoge:last-of-type applies only if the last p element among the children also has the class hoge. It does not target the last p with the class hoge.

div p.hoge:last-of-type { color: red;} /* Applies if the last p element inside a div also has the class "hoge". */

<div>
	<p class="hoge">This is the first p with class "hoge" inside the div.</p>
	<p class="hoge">This is the last p with class "hoge" inside the div.</p>
</div>
<div>
	<p>This is the first p element inside the div.</p>
	<p class="hoge">This is a p with class "hoge" inside the div.</p>
	<p class="hoge">This is a p with class "hoge" inside the div.</p>
	<p>This is the last p element inside the div.</p>
</div>

To target all last children of each element type, use *:last-of-type or just :last-of-type. This applies to the last element of each type among the children. For example, if there are both p and span elements among the children, the last p and the last span will each be targeted.

div :last-of-type { color: red;} /* Makes the last child of each element type inside the div red. */

<div>
	<div>This is a div element.</div>
	<p>This is a p element.</p>
	<div>This is a div element.</div>
	<p>This is a p element.</p>
</div>

div p:nth-of-type(2) { color: red;} /* Makes the 2nd p element inside a div red. */

div p:nth-of-type(2) { color: red;} /* Makes the 2nd p element inside a div red. */

<div>
	<p>This is a p element.</p>
	<div>This is a div element.</div>
	<p>This is a p element.</p>
	<div>This is a div element.</div>
</div>

To target all nth children of each element type, use *:nth-of-type(n) or just :nth-of-type(n). This applies to the nth element of each type among the children. For example, if there are both p and div elements among the children, the nth p and the nth div will each be targeted.

div :nth-of-type(2) { color: red;} /* Makes the 2nd child of each element type inside the div red. */

<div>
	<div>This is a div element.</div>
	<p>This is a p element.</p>
	<div>This is a div element.</div>
	<p>This is a p element.</p>
</div>

div p:nth-last-of-type(1) { color: red;} /* Makes the last p element (1st from the bottom) inside a div red. */
div p:nth-last-of-type(3) { color: blue;} /* Makes the 3rd-to-last p element inside a div blue. */

div p:nth-last-of-type(1) { color: red;} /* Makes the last p element (1st from the bottom) inside a div red. */
div p:nth-last-of-type(3) { color: blue;} /* Makes the 3rd-to-last p element inside a div blue. */

<div>
	<p>This is the 1st p element.</p>
	<div>This is the 1st div element.</div>
	<p>This is the 2nd p element.</p>
	<div>This is the 2nd div element.</div>
	<p>This is the 3rd p element.</p>
	<div>This is the 3rd div element.</div>
</div>

Using selector:only-child applies the rule when the element is the only child of its parent. This is commonly called a "pseudo-class." It is equivalent to :first-child:last-child or :nth-child(1):nth-last-child(1), but has lower specificity than those. Does not work in IE8 and below.

div p:only-child { color: red;} /* Turns the p element red if it is the only child inside a div. */
div.hoge :only-child { color: blue;} /* Turns the sole child of div.hoge blue if there is only one child. */

<div>
	<p>This is a p element.</p>
</div>
<div class="hoge">
	<div>This is a div element.</div>
</div>
<div>
	<p>This is a p element.</p>
	<div>This is a div element.</div>
</div>

Note that when combining id, class, or attribute selectors with :only-child, the browser first checks whether the element is the sole child, and then checks whether it also matches the additional selectors. For example, p.hoge:only-child only applies if the sole child is a p element that also has the class hoge.

div p.hoge:only-child { color: red;} /* Applies only if the sole child of the div is a p element with class "hoge". */

<div>
	<p class="hoge">This is a p element with class "hoge" inside the div.</p>
</div>
<div>
	<p>This is a p element inside the div.</p>
</div>

When using n as the argument to :nth-child, :nth-last-child, or :nth-of-type, n is treated as a sequence of non-negative integers starting from 0. This follows the same notation as even numbers (2n) and odd numbers (2n+1) in mathematics. Note that element positions start at 1, but n starts at 0.

Here are some examples. For 2n:

• n = 0 => 2 * 0 -> position 0 (no element)
• n = 1 => 2 * 1 -> position 2
• n = 2 => 2 * 2 -> position 4
• n = 3 => 2 * 3 -> position 6
• n = 4 => 2 * 4 -> position 8
• and so on...

For 2n+1:

• n = 0 => 2 * 0 + 1 -> position 1
• n = 1 => 2 * 1 + 1 -> position 3
• n = 2 => 2 * 2 + 1 -> position 5
• n = 3 => 2 * 3 + 1 -> position 7
• n = 4 => 2 * 4 + 1 -> position 9
• and so on...

For 6n-3:

• n = 0 => 6 * 0 - 3 -> position -3 (no element)
• n = 1 => 6 * 1 - 3 -> position 3
• n = 2 => 6 * 2 - 3 -> position 9
• n = 3 => 6 * 3 - 3 -> position 15
• n = 4 => 6 * 4 - 3 -> position 21
• and so on...

For -2n+3:

• n = 0 => -2 * 0 + 3 -> position 3
• n = 1 => -2 * 1 + 3 -> position 1
• n = 2 => -2 * 2 + 3 -> position -1 (no element)
• n = 3 => -2 * 3 + 3 -> position -3 (no element)
• n = 4 => -2 * 4 + 3 -> position -5 (no element)
• and so on...

For n+3:

• n = 0 => 1 * 0 + 3 -> position 3
• n = 1 => 1 * 1 + 3 -> position 4
• n = 2 => 1 * 2 + 3 -> position 5
• n = 3 => 1 * 3 + 3 -> position 6
• n = 4 => 1 * 4 + 3 -> position 7
• and so on...

Since element positions start at 1, any result of 0 or below is ignored.