2024-02-04T06:11:16.897Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
c710c485-0018-4282-9401-3b4cd981936a
923056076ed5c5a10cd6e6967cc389032232dbe9d59c097619421104bd9836fc
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Pseudo class.
A way to style an element based on a change to its state.
For example, when you hover over a button in the browser, it automatically adds this hover keyword to the selector.
When working with pseudo classes, it can be useful to go into the browser inspector and force the state on the element you're targeting.
There are a bunch of different pseudo classes out there, like focus when the user is actively using a form input, or disabled when a button has the disabled attribute set to true.
Pseudo classes are also useful when working with a collection of elements.
We can easily target the 1st or last element in the list relative to its other siblings at this level by targeting the 1st child or last child pseudo classes.
If we want to be more specific, we can use last of type, so it only targets this type of element.
But what if we want the second, third, or fourth element?
In that case, we can use nth child and pass an argument for the element that we want to grab.
Or, instead of a specific number, we might want to use odd or even.
Or maybe we want to grab every 5th element in the list.
Multiply 5 by n to get every 5th element, like 5, 10, 15, and so on.
You can also use addition and subtraction here to create any kind of pattern you want.
Now, sometimes, you might select something in your CSS, but what you actually want to style is everything else.
For that, we have the not pseudo class, which performs negation.
Notice how, when we hover over an element in this list, all of the other elements are styled, but not the actual element that we're hovering over.
That's because we're targeting all of the elements that are not hovered.
Pseudo selectors are especially powerful when working with forms.
One of my favorites is focus within, which allows a parent element to see if one of its children has focus.
And that's especially useful if you have something like a drop down menu and want to keep it open after the user has clicked a button.
If you're building a web app with an international audience, you might wanna know about the lang selector.
Use it to apply custom styles to any element that has a lang attribute.
You can use it to make all of your Dutch text orange or combine it with int child to make your German text black, red, and yellow.
This has been Pseudo Classes in 100 seconds.
Hit the like button if you wanna see more short videos like this.
Thanks for watching and I will see you in the next one.

Speaker 0: Pseudo class. A way to style an element based on a change to its state. For example, when you hover over a button in the browser, it automatically adds this hover keyword to the selector. When working with pseudo classes, it can be useful to go into the browser inspector and force the state on the element you're targeting. There are a bunch of different pseudo classes out there, like focus when the user is actively using a form input, or disabled when a button has the disabled attribute set to true.

Pseudo classes are also useful when working with a collection of elements. We can easily target the 1st or last element in the list relative to its other siblings at this level by targeting the 1st child or last child pseudo classes. If we want to be more specific, we can use last of type, so it only targets this type of element. But what if we want the second, third, or fourth element? In that case, we can use nth child and pass an argument for the element that we want to grab.

Or, instead of a specific number, we might want to use odd or even. Or maybe we want to grab every 5th element in the list. Multiply 5 by n to get every 5th element, like 5, 10, 15, and so on. You can also use addition and subtraction here to create any kind of pattern you want. Now, sometimes, you might select something in your CSS, but what you actually want to style is everything else.

For that, we have the not pseudo class, which performs negation. Notice how, when we hover over an element in this list, all of the other elements are styled, but not the actual element that we're hovering over. That's because we're targeting all of the elements that are not hovered. Pseudo selectors are especially powerful when working with forms. One of my favorites is focus within, which allows a parent element to see if one of its children has focus.

And that's especially useful if you have something like a drop down menu and want to keep it open after the user has clicked a button. If you're building a web app with an international audience, you might wanna know about the lang selector. Use it to apply custom styles to any element that has a lang attribute. You can use it to make all of your Dutch text orange or combine it with int child to make your German text black, red, and yellow. This has been Pseudo Classes in 100 seconds.

Hit the like button if you wanna see more short videos like this. Thanks for watching and I will see you in the next one.
Pseudo class. A way to style an element based on a change to its state. For example, when you hover over a button in the browser, it automatically adds this hover keyword to the selector. When working with pseudo classes, it can be useful to go into the browser inspector and force the state on the element you're targeting. There are a bunch of different pseudo classes out there, like focus when the user is actively using a form input, or disabled when a button has the disabled attribute set to true. Pseudo classes are also useful when working with a collection of elements. We can easily target the 1st or last element in the list relative to its other siblings at this level by targeting the 1st child or last child pseudo classes. If we want to be more specific, we can use last of type, so it only targets this type of element. But what if we want the second, third, or fourth element? In that case, we can use nth child and pass an argument for the element that we want to grab. Or, instead of a specific number, we might want to use odd or even. Or maybe we want to grab every 5th element in the list. Multiply 5 by n to get every 5th element, like 5, 10, 15, and so on.
You can also use addition and subtraction here to create any kind of pattern you want. Now, sometimes, you might select something in your CSS, but what you actually want to style is everything else. For that, we have the not pseudo class, which performs negation. Notice how, when we hover over an element in this list, all of the other elements are styled, but not the actual element that we're hovering over.
fashion
That's because we're targeting all of the elements that are not hovered. Pseudo selectors are especially powerful when working with forms. One of my favorites is focus within, which allows a parent element to see if one of its children has focus. And that's especially useful if you have something like a drop down menu and want to keep it open after the user has clicked a button.
If you're building a web app with an international audience, you might wanna know about the lang selector. Use it to apply custom styles to any element that has a lang attribute. You can use it to make all of your Dutch text orange or combine it with int child to make your German text black, red, and yellow.
languages
This has been Pseudo Classes in 100 seconds. Hit the like button if you wanna see more short videos like this. Thanks for watching and I will see you in the next one.
Pseudo class. A way to style an element based on a change to its state. For example, when you hover over a button in the browser, it automatically adds this hover keyword to the selector. When working with pseudo classes, it can be useful to go into the browser inspector and force the state on the element you're targeting. There are a bunch of different pseudo classes out there, like focus when the user is actively using a form input, or disabled when a button has the disabled attribute set to true. Pseudo classes are also useful when working with a collection of elements. We can easily target the 1st or last element in the list relative to its other siblings at this level by targeting the 1st child or last child pseudo classes. If we want to be more specific, we can use last of type, so it only targets this type of element. But what if we want the second, third, or fourth element? In that case, we can use nth child and pass an argument for the element that we want to grab. Or, instead of a specific number, we might want to use odd or even. Or maybe we want to grab every 5th element in the list. Multiply 5 by n to get every 5th element, like 5, 10, 15, and so on. You can also use addition and subtraction here to create any kind of pattern you want. Now, sometimes, you might select something in your CSS, but what you actually want to style is everything else. For that, we have the not pseudo class, which performs negation. Notice how, when we hover over an element in this list, all of the other elements are styled, but not the actual element that we're hovering over. That's because we're targeting all of the elements that are not hovered. Pseudo selectors are especially powerful when working with forms. One of my favorites is focus within, which allows a parent element to see if one of its children has focus. And that's especially useful if you have something like a drop down menu and want to keep it open after the user has clicked a button. If you're building a web app with an international audience, you might wanna know about the lang selector. Use it to apply custom styles to any element that has a lang attribute. You can use it to make all of your Dutch text orange or combine it with int child to make your German text black, red, and yellow. This has been Pseudo Classes in 100 seconds. Hit the like button if you wanna see more short videos like this. Thanks for watching and I will see you in the next one.
Pseudo
pseudo
class.
class
A
a
way
way
to
to
style
style
an
an
element
element
based
based
on
on
a
a
change
change
to
to
its
its
state.
state
For
for
example,
example
when
when
you
you
hover
hover
over
over
a
a
button
button
in
in
the
the
browser,
browser
it
it
automatically
automatically
adds
adds
this
this
hover
hover
keyword
keyword
to
to
the
the
selector.
selector
When
when
working
working
with
with
pseudo
pseudo
classes,
classes
it
it
can
can
be
be
useful
useful
to
to
go
go
into
into
the
the
browser
browser
inspector
inspector
and
and
force
force
the
the
state
state
on
on
the
the
element
element
you're
you're
targeting.
targeting
There
there
are
are
a
a
bunch
bunch
of
of
different
different
pseudo
pseudo
classes
classes
out
out
there,
there
like
like
focus
focus
when
when
the
the
user
user
is
is
actively
actively
using
using
a
a
form
form
input,
input
or
or
disabled
disabled
when
when
a
a
button
button
has
has
the
the
disabled
disabled
attribute
attribute
set
set
to
to
true.
true
Pseudo
pseudo
classes
classes
are
are
also
also
useful
useful
when
when
working
working
with
with
a
a
collection
collection
of
of
elements.
elements
We
we
can
can
easily
easily
target
target
the
the
1st
1st
or
or
last
last
element
element
in
in
the
the
list
list
relative
relative
to
to
its
its
other
other
siblings
siblings
at
at
this
this
level
level
by
by
targeting
targeting
the
the
1st
1st
child
child
or
or
last
last
child
child
pseudo
pseudo
classes.
classes
If
if
we
we
want
want
to
to
be
be
more
more
specific,
specific
we
we
can
can
use
use
last
last
of
of
type,
type
so
so
it
it
only
only
targets
targets
this
this
type
type
of
of
element.
element
But
but
what
what
if
if
we
we
want
want
the
the
second,
second
third,
third
or
or
fourth
fourth
element?
element
In
in
that
that
case,
case
we
we
can
can
use
use
nth
nth
child
child
and
and
pass
pass
an
an
argument
argument
for
for
the
the
element
element
that
that
we
we
want
want
to
to
grab.
grab
Or,
or
instead
instead
of
of
a
a
specific
specific
number,
number
we
we
might
might
want
want
to
to
use
use
odd
odd
or
or
even.
even
Or
or
maybe
maybe
we
we
want
want
to
to
grab
grab
every
every
5th
5th
element
element
in
in
the
the
list.
list
Multiply
multiply
5
5
by
by
n
n
to
to
get
get
every
every
5th
5th
element,
element
like
like
5,
5
10,
10
15,
15
and
and
so
so
on.
on
You
you
can
can
also
also
use
use
addition
addition
and
and
subtraction
subtraction
here
here
to
to
create
create
any
any
kind
kind
of
of
pattern
pattern
you
you
want.
want
Now,
now
sometimes,
sometimes
you
you
might
might
select
select
something
something
in
in
your
your
CSS,
css
but
but
what
what
you
you
actually
actually
want
want
to
to
style
style
is
is
everything
everything
else.
else
For
for
that,
that
we
we
have
have
the
the
not
not
pseudo
pseudo
class,
class
which
which
performs
performs
negation.
negation
Notice
notice
how,
how
when
when
we
we
hover
hover
over
over
an
an
element
element
in
in
this
this
list,
list
all
all
of
of
the
the
other
other
elements
elements
are
are
styled,
styled
but
but
not
not
the
the
actual
actual
element
element
that
that
we're
we're
hovering
hovering
over.
over
That's
that's
because
because
we're
we're
targeting
targeting
all
all
of
of
the
the
elements
elements
that
that
are
are
not
not
hovered.
hovered
Pseudo
pseudo
selectors
selectors
are
are
especially
especially
powerful
powerful
when
when
working
working
with
with
forms.
forms
One
one
of
of
my
my
favorites
favorites
is
is
focus
focus
within,
within
which
which
allows
allows
a
a
parent
parent
element
element
to
to
see
see
if
if
one
one
of
of
its
its
children
children
has
has
focus.
focus
And
and
that's
that's
especially
especially
useful
useful
if
if
you
you
have
have
something
something
like
like
a
a
drop
drop
down
down
menu
menu
and
and
want
want
to
to
keep
keep
it
it
open
open
after
after
the
the
user
user
has
has
clicked
clicked
a
a
button.
button
If
if
you're
you're
building
building
a
a
web
web
app
app
with
with
an
an
international
international
audience,
audience
you
you
might
might
wanna
wanna
know
know
about
about
the
the
lang
lang
selector.
selector
Use
use
it
it
to
to
apply
apply
custom
custom
styles
styles
to
to
any
any
element
element
that
that
has
has
a
a
lang
lang
attribute.
attribute
You
you
can
can
use
use
it
it
to
to
make
make
all
all
of
of
your
your
Dutch
dutch
text
text
orange
orange
or
or
combine
combine
it
it
with
with
int
int
child
child
to
to
make
make
your
your
German
german
text
text
black,
black
red,
red
and
and
yellow.
yellow
This
this
has
has
been
been
Pseudo
pseudo
Classes
classes
in
in
100
100
seconds.
seconds
Hit
hit
the
the
like
like
button
button
if
if
you
you
wanna
wanna
see
see
more
more
short
short
videos
videos
like
like
this.
this
Thanks
thanks
for
for
watching
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
The speaker explains the use of P Gas class for styleing elements based on a change to its state, and how it can be useful for working with pseudo classes. They also recommend using the not pseudo class for targeting all elements not hovered on and the focus within the list for keeping a web app open after the user clicks a button. The speaker also suggests using the not pseudo class for Dutch text and German text, and provides links to P Gas and a command line for seeing short videos.
CSS Pseudo-classes: in 100 Seconds
Learn how to use CSS pseudo-classes to style an element based on changes to its state. like :hover, :focus, and :nth-child. https://fireship.io/tags/css/

#css #100SecondsOfCode #tutorial


MDN Docs https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

Install the quiz app 🤓

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

My VS Code Theme

- Atom One Dark 
- vscode-icons
- Fira Code Font