CSS Selectors
A Short Guide to CSS Selectors
A common way to apply CSS to an HTML element is through either a Class or an ID attribute. But that is only the tip of the iceberg. CSS standards, and especially CSS3 standards provide powerful ways to control the style of an element.
Jump to: Simple Selectors, Psuedo Classes & Elements, Attribute Selectors, and Some Examples
Simple CSS Selectors
Tag Selector
You may select all HTML elements of type.
<p>Paragraph</p>
p { /* styles go here */ }
Class Selector
The class selector is used to target all elements which have been given the specified class.
<div class="x">content</div>
.x { /* styles go here */ }
Id Selector
The Id selector is used to target all elements which have been given the specified id.
<div id="x">content</div>
#x { /* styles go here */ }
Select All
You may select all elements in the current scope using an asterisk.
<!-- all three tags, the p, strong, and em, will be targeted -->
<p>Paragraph <strong>Bold</strong> <em>Italic</em></p>
* { /* styles go here */ }
Descendant Selector
The descendant selector will select all elements nested within another element.
<div>
<!-- this p tag will be targeted -->
<p>Paragraph</p>
</div>
<!-- this p tag will NOT be targeted -->
<p>Paragraph</p>
div p { /* styles go here */ }
Adjacent Selector
The adjacent selector will select all elements that appears immediately after another element.
<div>
<!-- this p tag will NOT be targeted -->
<p>Paragraph</p>
</div>
<!-- this p tag will be targeted -->
<p>Paragraph</p>
div + p { /* styles go here */ }
Direct Child Selector
The direct child selector will select all elements that is a direct child of another element.
<div>
<!-- this p tag will be targeted -->
<p>Paragraph</p>
<div>
<!-- this p tag will NOT be targeted -->
<p>Paragraph</p>
</div>
</div>
div > p { /* styles go here */ }
Sibling Selector
The sibling selector will select all elements that share a parent and proceed another element.
<div>Div tag</div>
<!-- this p tag will be targeted -->
<p>Paragraph</p>
<div>
<!-- this p tag will NOT be targeted -->
<p>Paragraph</p>
</div>
<!-- this p tag will be targeted -->
<p>Paragraph</p>
div ~ p { /* styles go here */ }
Psuedo Selector & Elements
A psuedo class is so called because it attaches itself to a selector, whether an tag, class, or id. Psuedo “Elements” are so called because they do not target an element directly, but rather an aspect of an element (the pseudo elements are :before
and :after
).
Language Selector
The language pseudo class specifies the styling of an element of a given language
<!-- not targeted -->
<div lang="en">Something</div>
<!-- targeted -->
<div lang="de">etwas</div>
div:lang(de) { /* styles go here */ }
Hover Selector
The hover selector specifies the styling of an element whenever the user hovers the cursor over it.
a { /* styles go here */ }
a:hover { /* mouse over styles go here */ }
Active Selector
The active selector is triggered whenever an element is clicked. The state usually remains until the click is released.
button { /* default style */ }
button:active { /* style when pressed */ }
Target Selector
The target selector specifies the style of an element which has the id of the link pressed.
<a href="#somewhere">Link</a>
<div id="somewhere">Div</div>
:target { /*styles go here*/ }
/* or specify target */
#somewhere:target { /*styles go here */ }
Link Pseudo Classes
Link Pseudo classes target the various states of an anchor. There are two states: 1) :link
indicates any unvisited anchor 2) :visited
indicates when an anchor has been previously visited.
a:link { /* styles go here */}
a:visited { /* for security, you may only specify color styles */}
Input Pseudo Classes
The input pseudo classes affect the state of various input elements.
The :focus
class selects form elements which are in focus and ready to accept input. The :enabled
class selects form elements which are not disabled. the :disabled
class selects form elements which are not enabled. The :checked
class selects radio or check box elements which have been selected.
input:focus { /*styles go here*/ }
input:enabled { /*styles go here*/ }
input:disabled { /*styles go here*/ }
input[type="checkbox"]:checked { /*styles go here*/ }
Selection Element
The selection element indicates the style of an element when selected or highlighted by the user. For example, if you highlight something on this page, you will notice that the selection background is red.
::selection { /* styles go here */ }
First Letter Selector
The first letter element will target the first letter of an element, including any preceding punctuation. It is used most often on a p
tag and in conjunction with a header tag.
/* target the first letter of the first paragraph after an h3 tag */
h3 + p:first-letter { /* styles go here */ }
First Line Element
The first line element will target the first line of an element. It too is used most often on a p
tag and in conjunction with a header tag.
/* target the first line of the first paragraph after an h3 tag */
h3 + p:first-line { /* styles go here */ }
First Child Selector
The first child selector will select the first element of some type in a series of elements.
<!-- this p tag will be targeted -->
<p>Paragraph</p>
<!-- this p tag will NOT be targeted -->
<p>Paragraph</p>
<!-- this p tag will NOT be targeted -->
<p>Paragraph</p>
p:first-child { /* styles go here */ }
Last Child Selector
The last child selector will select the last element of some type in a series of elements.
<!-- this p tag will NOT be targeted -->
<p>Paragraph</p>
<!-- this p tag will NOT be targeted -->
<p>Paragraph</p>
<!-- this p tag will be targeted -->
<p>Paragraph</p>
p:last-child { /* styles go here */ }
First of Type
The first of type selector will select the first child of the specified type in a series of elements.
<!-- this h1 tag will NOT be targeted -->
<h1>Header 1</h1>
<!-- this p tag will be targeted -->
<p>Paragraph</p>
<!-- this p tag will NOT be targeted -->
<p>Paragraph</p>
<!-- this p tag will NOT be targeted -->
<p>Paragraph</p>
/* the first <p> tag will be targeted */
p:first-of-type { /* styles go here */ }
Last of Type
The last of type selector will select the last child of the specified type in a series of elements.
<!-- this h1 tag will NOT be targeted -->
<h1>Header 1</h1>
<!-- this p tag will NOT be targeted -->
<p>Paragraph</p>
<!-- this p tag will NOT be targeted -->
<p>Paragraph</p>
<!-- this p tag will be targeted -->
<p>Paragraph</p>
/* the first <p> tag will be targeted */
p:first-of-type { /* styles go here */ }
Nth Child Selector
The nth child selector will select the nth child of an element in a series of elements, where n may be an algebraic expression.
<!-- this h1 tag will NOT be targeted -->
<h1>Header 1</h1>
<!-- this p tag will NOT be targeted -->
<p>Paragraph</p>
<!-- this p tag will be targeted -->
<p>Paragraph</p>
<!-- this p tag will NOT be targeted -->
<p>Paragraph</p>
/* the 3rd, 5th, 7th, etc. element will be targeted if it is a <p> */
p:nth-child(2n+1) { /* styles go here */ }
Nth of Type Selector
The nth of type selector will select the nth child of the specified type in a series of elements, where n may be an algebraic expression.
<!-- this h1 tag will NOT be targeted -->
<h1>Header 1</h1>
<!-- this p tag will NOT be targeted -->
<p>Paragraph</p>
<!-- this p tag will NOT be targeted -->
<p>Paragraph</p>
<!-- this p tag will be targeted -->
<p>Paragraph</p>
/* the 3rd, 5th, 7th, etc. <p> tag will be targeted */
p:nth-of-type(2n+1) { /* styles go here */ }
Nth Last Child Selector
The nth last Child selector will select the nth child in a series of elements starting from the bottom, where n may be an algebraic expression.
<!-- this p tag will NOT be targeted -->
<p>Paragraph</p>
<!-- this p tag will be targeted -->
<p>Paragraph</p>
<!-- this h2 tag will NOT be targeted -->
<h2>Header 2</h2>
<!-- this p tag will NOT be targeted -->
<p>Paragraph</p>
/* the 3rd to last, 5th to last, 7th to last, etc. element will be targeted if it is a <p> tag */
p:nth-last-child(2n+1) { /* styles go here */ }
Nth of Last of Type Selector
The nth last of type selector will select the nth child of the specified type in a series of elements starting from the bottom, where n may be an algebraic expression.
<!-- this h1 tag will NOT be targeted -->
<h1>Header 1</h1>
<!-- this p tag will be targeted -->
<p>Paragraph</p>
<!-- this p tag will NOT be targeted -->
<p>Paragraph</p>
<!-- this p tag will NOT be targeted -->
<p>Paragraph</p>
/* the 3rd to last, 5th to last, 7th to last, etc. <p> tag will be targeted */
p:nth-last-of-type(2n+1) { /* styles go here */ }
Only Child Selector
The only child selector will select an element if it is the only child element.
<ul>
<!--this <li> tag will be targeted-->
<li>List</li>
</ul>
<ul>
<!--these <li> tag will NOT be targeted-->
<li>List</li>
<li>List</li>
</ul>
ul li:only-child { /* styles go here */ }
Only of Type Selector
The only of type selector will select an element if it is the only element of its kind in a series of elements.
<ul>
<!--this <li> tag will be targeted-->
<li>List</li>
<p>Paragraph</p>
</ul>
<ul>
<!--these <li> tag will NOT be targeted-->
<li>List</li>
<li>List</li>
</ul>
ul li:only-of-type { /* styles go here */ }
Not Selector
The not selector will target any element not specified by some css expression.
<!-- this p tag will be targeted -->
<p>Paragraph</p>
<!-- this p tag will NOT be targeted -->
<p class="this">Paragraph</p>
p:not(.this) { /* styles go here */ }
Empty Selector
The empty selector will target an element when it is empty of content or another element.
<!-- this p tag will be targeted -->
<p><!-- Comments do not count as content --></p>
<!-- this p tag will NOT be targeted -->
<p>Paragraph</p>
p:empty { /* styles go here */ }
Before Element
The before element is a pseudo element that is visually inserted onto the page before the element without actually appearing in the DOM. :before
requires the content
attribute.
<span class="this">here</span>
::::css
/* The page would read "this here" */
.this:before { content: "this "}
After Element
The after element is a pseudo element that is visually inserted onto the page after the element without actually appearing in the DOM. :after
requires the content
attribute.
<span class="this">here</span>
::::css
/* The page would read "here is this" */
.this:after { content: "is this "}
Attribute Selection
In css you may target any element through its attribute. The attribute does not need to be a commonly used or documented attribute; in fact, you may select an element by an arbitrarily created attribute. e.g. <span some="attribute">Word</span>
can by targeted by span[some="attribute"] { }
.
Attribute Selector
You may select all HTML elements of a type with a particular attribute.
<a href="#" title="some title">Link</p>
/* this will select all <a> tags with any title */
a[title] { /* styles go here */ }
Attribute Equals Selector
You may select all HTML elements of the specified type where the attribute value matches exactly.
<a href="#" title="lol">Link</p>
/* this will select all <a> tags with a title that is lol */
a[title="lol"] { /* styles go here */ }
Attribute Matches Selector
You may select all HTML elements of the specified type where the value appears within the attribute.
<a href="https://www.google.com">Link</p>
/* this will select all <a> tags with an href that contains the string google */
a[href*="google"] { /* styles go here */ }
Attribute Begins Selector
You may select all HTML elements of the specified type where the attribute begins with the value.
<a href="https://www.google.com">Link</p>
/* this will select all <a> tags with an href that begins with https */
a[href^="https"] { /* styles go here */ }
Attribute Begins Selector
You may select all HTML elements of the specified type where the attribute ends with the value.
<img src="/img/image.jpg">
/* this will select all <img> tags with an src that ends with .jpg */
img[href$=".jpg"] { /* styles go here */ }
Space Separated List Selector
You may select all HTML elements of the specified type where the attribute contains the value within a space separated list.
<a rel="some values" href="#">Link</a>
/* this will select all <a> tags with a rel that contains some */
a[rel~="some"] { /* styles go here */ }
Dash Separated List Selector
You may select all HTML elements of the specified type where the attribute contains the value within a dash separated list.
<a rel="some-person" href="#">Link</a>
/* this will select all <a> tags with a rel that contains some */
a[rel~="person"] { /* styles go here */ }