the syntax of pseudo-class in css
The syntax of pseudo-classes:
selector:pseudo-class {
property:value;
}the syntax of pseudo-class in css
The syntax of pseudo-classes:
selector:pseudo-class {
property:value;
}css psedo class
button:hover {
color: blue;
}
A pseudo-class is a word such as :hover that makes its changes
to the selected element by adding it along side the selector
before the curly braces in CSS instead of inside the curly
braces.
You can search for a list of pseudo-class online.pseudo-classe css
a:linklink in normal state
a:activelink in clicked state
a:hoverlink with mouse over it
a:visitedvisited link
p::after{content:"yo";}add content after p
p::beforeadd content before p
input:checkedchecked inputs
input:disableddisabled inputs
input:enabledenabled inputs
input:focusinput has focus
input:in-rangevalue in range
input:out-of-rangeinput value out of range
input:validinput with valid value
input:invalidinput with invalid value
input:optionalno required attribute
input:requiredinput with requred attribute
input:read-onlywith readonly attribute
input:read-writeno readonly attrib.
div:emptyelement with no children
p::first-letterfirst letter in p
p::first-linefirst line in p
p:first-of-typefirst of some type
p:last-of-typelast of some type
p:lang(en)p with en language attribute
:not(span)element that's not a span
p:first-childfirst child of its parent
p:last-childlast child of its parent
p:nth-child(2)second child of its parent
p:nth-child(3n+1)nth-child (an + b) formula
p:nth-last-child(2)second child from behind
p:nth-of-type(2)second p of its parent
p:nth-last-of-type(2)...from behind
p:only-of-typeunique of its parent
p:only-childonly child of its parent
:rootdocuments root element
::selectionportion selected by user
:targethighlight active anchorWhat is a pseudo selector?
A pseudo-class is a selector that selects elements that are in a specific state, e.g. they are the first element of their type, or they are being hovered over by the mouse pointercss pseudo classes
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited
link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
