KEMBAR78
CSS Pseudo Selectors Quick Guide | PDF | Button (Computing) | Interactive Media
Scribd
Upload
23 views1 page

CSS Pseudo Selectors Quick Guide

This document provides a quick guide to CSS pseudo-selectors, categorizing them into pseudo-classes and pseudo-elements. It lists various pseudo-classes such as :hover, :active, and :nth-child, along with their descriptions and examples. Additionally, it covers pseudo-elements like ::before, ::after, and ::first-letter, detailing their usage and examples.

Uploaded by

aayushkush21
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
23 views1 page

CSS Pseudo Selectors Quick Guide

This document provides a quick guide to CSS pseudo-selectors, categorizing them into pseudo-classes and pseudo-elements. It lists various pseudo-classes such as :hover, :active, and :nth-child, along with their descriptions and examples. Additionally, it covers pseudo-elements like ::before, ::after, and ::first-letter, detailing their usage and examples.

Uploaded by

aayushkush21
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

CSS Pseudo-selectors - Quick Guide

1. Pseudo-classes

1. Pseudo-classes (start with :)

| Pseudo-class | Description | Example |

|------------------|--------------------------------------|----------------------------------------|

| :hover | On mouse hover | a:hover { color: red; } |

| :active | When clicked | button:active { background: gray; } |

| :focus | When focused | input:focus { border: 2px solid blue; }|

| :nth-child(n) | Nth child element | li:nth-child(2) { color: green; } |

| :first-child | First child | p:first-child { font-weight: bold; } |

| :last-child | Last child | p:last-child { font-style: italic; } |

| :not(selector) | Not matching selector | div:not(.special) { color: gray; } |

| :checked | Checked inputs | input:checked { background: yellow; } |

| :disabled | Disabled elements | button:disabled { opacity: 0.5; } |

| :empty | No children inside | div:empty { display: none; } |

2. Pseudo-elements

2. Pseudo-elements (start with ::)

| Pseudo-element | Description | Example |

|------------------|--------------------------------------|------------------------------------------|

| ::before | Before content | p::before { content: "Text"; } |

| ::after | After content | p::after { content: " End"; } |

| ::first-letter | First letter | p::first-letter { font-size: 2em; } |

| ::first-line | First line of text | p::first-line { color: blue; } |

| ::selection | Text selection style | ::selection { background: yellow; } |

| ::placeholder | Placeholder text style | input::placeholder { color: gray; } |

You might also like