---
title: "CSS Target Selector Tutorial"
url: https://weworkworldwide.com/tutorials/css-target-selector-tutorial/
description: "In this section, we will learn what the target selector is and how to use it in CSS. CSS ::target Pseudo Class First of all, when the id value of an elemen"
date: 2026-08-25T13:00:03+00:00
source: https://weworkworldwide.com/llms.txt
---
# CSS Target Selector Tutorial
In this section, we will learn what the target selector is and how to use it in CSS.
## CSS ::target Pseudo Class
First of all, when the id value of an element appears on a URL, that elements becomes the target element! This means, if we load the content of that URL, browsers automatically bring the focus of the page to that element. (For example, if the target element is in the bottom of the page, browsers automatically scroll down to make the element become visible to users).
Now, the ::target selector is used to create style and apply that to a target element (the one that its id appeared on the URL).
## Example: using ::target pseudo class in CSS
``` line-numbers
CSS is fun :)
header
I'm the first of type p element in this div container
One of many
One of many
One of many
```
In the example above, any p element that its ID appears in the URL is considered to be the target element.
## How Does ::target pseudo class work?
``` line-numbers
```
As the picture above shows, in this example I have selected the “Target the paragraph three” link and as a result of this link selection, the ID of the third paragraph appears in the URL, so now this paragraph is the target and the CSS style of the “p:target” selector applies to this element.
We could be more general and style any element that its ID appears in the URL with only using “:target” as the selector.
## Example: using the :target selector in CSS
``` line-numbers
CSS is fun :)
I'm the first of type p element in this div container
- List Item one
- List Item two
```