Advanced Selector

in CSS (Pseudo
Element and Pseudo
Class)

PW SKILLS
Topic
● Introduction to Pseudo Selectors
● Define Pseudo Classes
● List of some of the common Pseudo-class selectors with
example
● Define Pseudo element
● List of some of the common Pseudo-element selectors
with example

PW SKILLS
Introduction to Pseudo Selectors
● Pseudo-selectors are a type of selector in CSS (Cascading Style Sheets) that allow you
to target and style specific elements based on their state or position in the HTML
document, without using additional classes or IDs

● They are denoted with a colon (":") followed by a keyword and are used to apply styles
to elements that meet specific conditions or criteria.

PW SKILLS
Define Pseudo Classes
● Pseudo-classes are predefined keywords used to select an element based on its state
or target a specific child. They start with a single colon ( : ).
● They can be used as part of a selector, and they are very useful to style active or visited
links for example, change the style on hover, focus, target the first child, or odd rows
which is very handy in many cases.
● For example,
■ Element styling when a user mouses over it
■ Styling of visited and visited links differently
■ Styling of elements when focused.

PW SKILLS
List of some of the common Pseudo-class selectors
with example
Pseudo class name CSS Description

Hover selector button:hover Select elements that are hovered by the mouse.

Select elements that are focus by either tabbing or

Focus selector button:focus
clicking on the element.
Required selector input:required Select elements that are required.

Checked selector input:checked Select checkboxes/radio buttons that are checked

Disabled selector input:disabled Select inputs that are disabled

Select elements that are the first child inside a
First Child selector a:first-child
container
Select elements that are the last child inside a
Last Child selector a:last-child
container
Select elements that are the nth child inside a
Nth Child selector a:nth-child(2n)
container based on the formula.

PW SKILLS
continue…
Pseudo class name CSS Description

Empty selector p:empty Select element that do not contain any child elements or text content
selects an element when it is being clicked or pressed down by the mouse
Active selector a:active
pointer.
Visited selector a:visited Selects a link that has been visited
Link selector a:link selects an unvisited link.
:not() root Selects the documents root element
enabled input: enabled selects a form element that is enabled.
first-of-type P:first-of-type Selects every element that is the first element of its parent
in-range input:in-range Selects element with a value within a specified range
Required selector input:required Selement elements with a required attribute specified
Valid selector input: valid Select all elements with a valid value
Target selector a:target Select the current active element
Visited selector a:visited Selects all visited links
invalid:selector input:invalid Selects all elements with an invalid value
Last-of-type
p:last-of-type Selects elements that is last element of its parent
selector
Not selector :not(p) Select every element that is not a <p> element
Optional selector input:optional Select <input> elements with no “required” attribute

PW SKILLS
Example of Pseudo class selectors
:* hover :/ :* checked :/ Output
h1:hover { input:checked {
color: red; border: none;
text-decoration:line-through; outline: 1px solid red;
} }
:* focus:/ :* disable :/
button:focus { input:disabled {
color: red; background-color: grey;
} }
:* required :/ :*child selector:/
input:required { div:first-child {
color: red; color: brown;
} }
div:last-child {
color: green;
}
div:nth-child(2n) {
color: blue;
}

PW SKILLS
Define Pseudo element
● Pseudo-element selectors are used to style a specific part of an element. They start
with a double colon (::).
● Examples like ::before,::after are probably the most used pseudo-elements. They are
used to add content before or after an element.

PW SKILLS
List of some of the common Pseudo-element
selectors with example
Pseudo Element Name CSS Description

after tag::after Insert content after the content of an element

before tag::before Insert content before the content of an element

first-letter tag::first-letter Selects the forest letter of each element

first-line tag::first-line Select the first line of each element

Matches the portion of an element that is

selection tag::selection
selected by a user

PW SKILLS
Example of Pseudo element Selectors
:* before and after selector - insert :* first-line - apply the css Output
content to before and after :/ properties to the first line :/
h1::after { p::first-line {
content: "After!"; background-color: yellow;
color: red; text-decoration: underline;
} }
h1::before { :* selection - apply the css
content: "Before!"; properties to the select element :/
color: green; p::selection {
} background-color: yellow;
:* first-letter selector - select the color: red;
first letter and applied the css }
properties :/
h2::first-letter {
color: red;
font-size: 40px;
}

PW SKILLS
THANK YOU

PW SKILLS