Loading...
Please wait while we prepare your content
p {
color: red;
}
#my-id {
color: red;
}
.my-class {
color: red;
}
img[src] {
color: red;
}
a:hover {
color: red;
}
p::first-letter {
color: red;
}
div > p {
color: red;
}You can combine many type selectors and make your selection more specific.
*: Matches all the existing element.
<div class="box1">
<h1 class="target-1">Target 1</h1>
<h1 class="target-2">Target 2</h1>
<p>Target 3</p>
</div>
<div class="box2"><h3 class="target-4">Target 4</h3></div>
<style>
* {
color: red;
}
</style>A
- Type selector
- Matches any specified elements
<div class="box1">
<h1 class="target-1">Target 1</h1>
<h1 class="target-2">Target 2</h1>
<p>Target 3</p>
</div>
<div class="box2"><h3 class="target-4">Target 4</h3></div>
<style>
* {
color: red;
}
h1 {
color: blue;
}
</style>A, B
- Compound selector
- Matches elements A and B
- Example: Here we combine two class selector
.box1and.box2
<div class="box1">
<h1 class="target-1">Target 1</h1>
<h1 class="target-2">Target 2</h1>
<p>Target 3</p>
</div>
<div class="box2"><h3 class="target-4">Target 4</h3></div>
<style>
* {
color: red;
}
h1 {
color: blue;
}
.box1, .box2 {
border: 2px solid black;
}
</style>A B
- Descendant combinator
- Matches B only if it is a descendant of element A
- Example: Here we select
pthat is descendant of.box1- which are Target 3 and Target 4.
<div class="box1">
<h1 class="target-1">Target 1</h1>
<h1 class="target-2">Target 2</h1>
<p>Target 3</p>
<div class="box1-1"> <p>Target 4</p> </div>
</div>
<div class="box2">
<h3 class="target-4">Target 5</h3>
<p>Target 6</p>
</div>
<style>
* {
color: red;
}
h1 {
color: blue;
}
.box1, .box2 {
border: 2px solid black;
}
.box1 p {
color: green;
}
</style>A > B
- Child combinator
- Matches element B that is a child of element A
- Example: Here we select
pthat is the direct child of.box1- which is only Target 3.
<div class="box1">
<h1 class="target-1">Target 1</h1>
<h1 class="target-2">Target 2</h1>
<p>Target 3</p>
<div class="box1-1"> <p>Target 4</p> </div>
</div>
<div class="box2">
<h3 class="target-4">Target 5</h3>
<p>Target 6</p>
</div>
<style>
* {
color: red;
}
h1 {
color: blue;
}
.box1, .box2 {
border: 2px solid black;
}
.box1 > p {
color: green;
}
</style>A + B
- Next-sibling combinator
- Matches element B that immediately follows element A, where A and B share the same parent
- Example: Here, we select only
pthat immediately follows.target-4- which is only Target 6.
<div class="box1">
<h1 class="target-1">Target 1</h1>
<h1 class="target-2">Target 2</h1>
<p>Target 3</p>
<div class="box1-1"> <p>Target 4</p> </div>
</div>
<div class="box2">
<h3 class="target-4">Target 5</h3>
<p>Target 6</p>
<p>Target 7</p>
</div>
<style>
* {
color: red;
}
h1 {
color: blue;
}
.box1, .box2 {
border: 2px solid black;
}
.box1 > p {
color: green;
}
.target-4 + p {
color: purple;
}
</style>A ~ B
- Subsequent-sibling combinator
- Matches element B that is preceded by A, where A and B share the same parent
- Example: Here, we select all
pthat is preceded by.target-4- which are Target 6 and Target 7.
<div class="box1">
<h1 class="target-1">Target 1</h1>
<h1 class="target-2">Target 2</h1>
<p>Target 3</p>
<div class="box1-1"><p>Target 4</p></div>
</div>
<div class="box2">
<h3 class="target-4">Target 5</h3>
<p>Target 6</p>
<p>Target 7</p>
</div>
<style>
* {
color: red;
}
h1 {
color: blue;
}
.box1,
.box2 {
border: 2px solid black;
}
.box1 > p {
color: green;
}
.target-4 ~ p {
color: purple;
}
</style>::before
- Insert generated text at the beginning of the specified element and apply a style to it.
<div class="box1">
<h1 class="target-1">Target 1</h1>
<h1 class="target-2">Target 2</h1>
<div class="box1-1"><p>Target 3</p></div>
</div>
<div class="box2">
<h3 class="target-4">Target 4</h3>
<p>Target 5</p>
</div>
<style>
h1::before {
content: "Content before";
background-color: yellow;
}
</style>::after
- Insert generated content at the end of the specified element and apply a style to it.
<div class="box1">
<h1 class="target-1">Target 1</h1>
<h1 class="target-2">Target 2</h1>
<div class="box1-1"><p>Target 3</p></div>
</div>
<div class="box2">
<h3 class="target-4">Target 4</h3>
<p>Target 5</p>
</div>
<style>
h1::after {
content: "Content after";
background-color: blue;
}
</style>::first-letter
- Selects the first letter of the specified element.
<div class="box1">
<h1 class="target-1">Target 1</h1>
<h1 class="target-2">Target 2</h1>
<div class="box1-1"><p>Target 3</p></div>
</div>
<div class="box2">
<h3 class="target-4">Target 4</h3>
<p>Target 5</p>
</div>
<style>
h1::first-letter {
color: green;
}
</style>::first-line
- Select the first line of a block-level element.
<div class="box1">
<h1 class="target-1">Target 1</h1>
<h1 class="target-2">Target 2</h1>
<div class="box1-1">
<p>Target 3</p>
</div>
</div>
<div class="box2">
<h3 class="target-4">Target 4</h3>
<p>Target 5</p>
</div>
<style>
div::first-line {
color: red;
}
</style>:root
- Tree-structural pseudo-class selector.
- Selects an element that is the root of the document. In HTML, it is the html element.
<div class="box1">
<h1 class="target-1">Target 1</h1>
<div class="box1-1">
<p>Target 2</p>
</div>
</div>
<style>
:root {
color: red;
}
</style>:link
- Link pseudo-class selector
- Specifies a style for links that still need to be visited.
<a href="#"> Click on this link to see effect </a>
<style>
a:link {
color: green;
}
</style>:visited
- Link pseudo-class selector
- Specifies a style for links that have already been visited.
<a href="#"> Click on this link to see effect </a>
<style>
a:visited {
color: purple;
}
</style>:active
- User action pseudo-class selector
- Selects any element that has been activated by the user, such as a link as it is being clicked.
<a href="#"> Click on this link to see effect </a>
<style>
a:link {
color: blue;
}
</style>:hover
- User-action pseudo-class selector.
- Specifies a style for elements (typically links) that appear when the mouse is placed over them.
<a href="#"> Hover on this link to see effect</a>
<style>
a:hover {
cursor: progress;
background-color: pink;
}
</style>:focus
- User action pseudo-class selector
- Selects any element that currently has the input focus, such as a selected form input.
Click or focus on this box to see style: <input id="selected" type="text" />
<br />
When focused this box has no styles: <input id="not-selected" type="text" />
<style>
#selected:focus {
background-color: pink;
}
</style>:first-child
- Structural pseudo-class selector
- Selects an element that is the first child of its parent element.
- Example:
- Select all the
h1that is the first child of its parent element.- Target 1 is selected as it is the first child of
.box1.- Target 3 is not selected because it is the second child.
<div class="box1">
<h1>Target 1</h1>
<div class="box1-1">
<p>Target 2</p>
<h1>Target 3</h1>
</div>
<p>Target 4</p>
</div>
<style>
h1:first-child {
color: blue;
}
</style>:last-child
- Structural pseudo-class selector
- Selects an element that is the last child of its parent element.
- Example:
- Select all the
h1that is the last child of its parent element.- Now only Target 2 is selected because it is the last child of
.box1-1
<div class="box1">
<h1>Target 1</h1>
<div class="box1-1">
<p>Target 2</p>
<h1>Target 3</h1>
</div>
<p>Target 4</p>
</div>
<style>
h1:last-child {
color: blue;
}
</style>:only-child
- Structural pseudo-class selector
- Selects an element that is the only child of its parent.
<div class="box1">
<h1 class="target-1">Target 1</h1>
<div class="box1-1">
<p>Target 2</p>
</div>
<p>Target 3</p>
</div>
<style>
p:only-child {
color: green;
}
</style>:nth-child(n)
- Structural pseudo-class selector
- Select an element that is the nth child of its parent. The notation can include a number, a notation, or odd or even keywords.
- Example:
div:nth-child(2)- select the second element of div siblings.
<div class="box1">
<h1 class="target-1">Target 1</h1>
<div class="box1-1">
<p>Target 2</p>
</div>
<p>Target 3</p>
</div>
<style>
div:nth-child(2) {
color: blue;
}
</style>