Caution

JavaScript is disabled in your browser.
This site uses JavaScript for features such as search.
For the best experience, please enable JavaScript before browsing this site.

CSS Dictionary

Home
CSS Dictionary
[CSS Selector] E:target

[CSS Selector] E:target

'selector:target' applies styles to an element whose id matches the hash value in the URL. The 'hash value' (fragment, anchor) is the part of the URL after the '#' symbol. For example, in 'http://wp-p.info/index.html#hoge', 'hoge' is the hash value. This is commonly referred to as a 'pseudo-class' (the :target pseudo-class). It does not work in IE8 and below.

Sample Code

style.css

/* Make a p element whose id matches the URL hash red */
p:target { color: red;}

/* Highlight the targeted section */
section:target { background-color: #fffde7; padding: 16px;}

/* Smoothly change background color when targeted */
.section:target { background-color: #e3f2fd; transition: background-color 0.5s ease;}

/* Add a left border to the targeted section (common in-page link pattern) */
#about:target { border-left: 4px solid #3498db; padding-left: 12px;}
#contact:target { border-left: 4px solid #e74c3c; padding-left: 12px;}

Browser Display Result

p:target { color: red;} /* Makes a p element with an id attribute matching the 'hash value' display in red. */

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

Click here to change the text color.

The color will change.

Browser Compatibility

Desktop

Chrome

1+ ○

Firefox

1+ ○

Safari

1.3+ ○

Edge

12+ ○

11 ○

10 ○

9 ○

8 ×

7 ×

6 ×

Opera

9.5+ ○

8 and earlier ×

Mobile

iOS Safari

2+ ○

1 and earlier ×

Android Browser

2+ ○

Chrome Android

Latest ○

Same support as desktop

Firefox Android

Latest ○

Same support as desktop

※ Version data is based on MDN.

If you find any errors or copyright issues, please contact us.

Home