CSS selector reference guide

This is the second in a serie of reference guide.
I will use this post as a reference guide for CSS selector.

If you found mistake or have any comment leave it at the bottom of the page.

Selector

Select a specific ID

#your-id {
// your css here
}

Select 2 or more ID at once

// note that there is a comma and a space between classes
#first-id, #second-id {
// your css here
}

Select a specific class

.your-class {
// your css here
}

Select 2 or more classes at once

// note that there is no spaces between classes
.first-class.second-class {
// your css here
}

Paragraph <p>

// this will select all &lt;p&gt;
p{
// your css here
}

Select all <div> & <p>

// this will select all <div> & <p>
div, p{
// your css here
}

Select all <p> inside <div>

// this will select all <p> that are inside <div>
div p{
// your css here
}

Select all <p> where the parent is <div>

// this will select all <p> where the parent is <div>
div > p{
// your css here
}

Select all <p> that are placed immediately after <div>

// this will select all <p> that are placed immediately after <div>
div + p{
// your css here
}

Select all <p> element that are preceded by a <div>

// this will select all <p> element that are preceded by a <div>
div ~ p{
// your css here
}

Select active elements

// this will select all active link
a:active{
// your css here
}

Insert something after an elements

// this will insert something after the <p> element
p::after{
// your css here
}

Insert something before an elements

// this will insert something before the <p> element
p::before{
// your css here
}

Select the element in focus

// this will select the input element in focus
input:focus{
// your css here
}

Select the element on mouse over

// this will select the link on mouse over
a:hover{
// your css here
}

Select an element that is the only child of its parent

// this will select all p that is the only child of its parent
p:only-child{
// your css here
}

Select an element that is the first child of its parent

// this will select all p that is the first child of its parent
p:first-child{
// your css here
}

Select an element that is the last child of its parent

// this will select all p that is the last child of its parent
p:last-child{
// your css here
}

Select an element that is the # child of its parent

// this will select all p that is the 2 child of its parent
p:nth-child(2){
// your css here
}

Select an element that is the # last child of its parent

// this will select all p that is the 2 last child of its parent
p:nth-last-child(2){
// your css here
}

Select the first letter of an element

// this will select this first letter of all p
p::first-letter{
// your css here
}

Select the first line of an element

// this will select this first line of all p
p::first-line{
// your css here
}

Select an element that is the firt of its parent

// this will select the p element that is the first p of its parent
p:first-of-type{
// your css here
}

Select an element that is the last of its parent

// this will select the p element that is the last p of its parent
p:last-of-type{
// your css here
}

Select an element that is the # of its parent

// this will select the p element that is the 3 p of its parent
p:nth-of-type(3){
// your css here
}

Select an element that is the # last of its parent

// this will select the p element that is the 2 last p of its parent
p:nth-last-of-type(2){
// your css here
}

Select an element that is the only of this type of its parent

// this will select all p that is the only p of its parent
p:only-of-type{
// your css here
}

Select all unvisite link

// this will select all unvisited links
a:link{
// your css here
}

Select all visited link

// this will select all visited links
a:visited{
// your css here
}

Input

Select all checked input element

// this will select all checked input element
input:checked{
// your css here
}

Select all disabled input element

// this will select all disabled input element
input:disabled{
// your css here
}

Select all enabled input element

// this will select all enabled input element
input:enabled{
// your css here
}

Select all optional input element

// this will select all optional input element
input:optional{
// your css here
}

Select all input that the value is out of range input element

// this will select all input element that its value is how of range
input:out-of-range{
// your css here
}

Select all input with a “readonly” attribute

// this will select all input element with a "readonly" attribute
input:read-only{
// your css here
}

Select all input with the “readonly” attribute NOT specified

// this will select all input element WITHOUT the "readonly" attribute
input:read-write{
// your css here
}

Select all input with a “required” attribute

// this will select all input element with a "required" attribute
input:required{
// your css here
}

Select all input with a valid value

// this will select all input element with a valid value
input:valid{
// your css here
}

Element

<div>

div {
// your css here
}

<p>

p {
// your css here
}

List

<ul>

ul {
// your css here
}

<th>

li {
// your css here
}

Table

<table>

table {
// your css here
}

<th>

th {
// your css here
}

<td>

td {
// your css here
}

<tr>

tr {
// your css here
}

This is based on what I learned over time on W3school website.


Advertise with us!