CSS Tutorial for Beginners - 52 - Attribute Selector - Selectors Part 5 Video Lecture | Learn CSS: A Comprehensive Tutorial for Web Developers - Front-End Programming

in this video we're going to continue on
with our massive review of selectors and
we're going to look at the attribute
selector yet another way you can target
elements and that is we use the HTML
attribute now you will remember
attributes just give us more information
about our HTML element and pretty much a
lot of people use HTML attributes in
their web programming today so a lot of
elements again come along with their
necessary attributes now we're going to
use the language attribute in this video
but this could apply to any attribute
href attributes source attributes
whatever attributes you want to target
we're just going to use the language
attribute in this video and there are
several different types of these
attribute selectors so we're going to
cover the main ones that you want to use
in this video so you can see down here
in the CSS spreadsheet I've got the
first attribute we're going to talk
about and they are always identified by
these square brackets so these are
always what you're going to use with
your attribute selector now the first
attribute selector is the easiest one
you're just selecting the attribute by
its type and so in this case we put the
language attribute here very simple so
we're saying hey all of the language
attributes inside paragraph elements
will be selected and if we look at our
HTML page here it will be these three
and so again you could put any attribute
type here you want so if this was an
href you would put href here if it was
for a source attribute you would put SRC
whatever you want it so let's go ahead
and save this will refresh our page and
there you can see the background color
now is changed for orange we selected
all three of these language attributes
that came along with these paragraph
elements so that's the first type and as
I said the easiest one now the second
one is we can actually associate a value
with an attribute so let's say we wanted
to target this middle one right here we
wanted this value of F R so we're saying
hey give us the language attribute that
has this exact value F R which of course
stands for French so all we do is we put
the value here and we use double quotes
and there you can see we're saying now
give us the language attribute along
with any value that has the French value
in it so let's go ahead and save this or
refresh our page and just the middle one
is selected so again that's with a
specific value by the way I will put all
these examples in the description of
this video so you don't have to worry
about saving these I'll put them all out
there for you all the examples that we
used in this video now we can also match
an attribute that begins with a specific
value notice I use the word begin it
begins with a specific value and what we
use is the caret character that's what
we do so we can just put that right
after our language attribute so it goes
right here and now what we're saying is
any value that begins with Fr go ahead
and select that element so now this
element should be selected as well right
because we're saying hey anything that
begins with F are selected so let's go
ahead and save this if we refresh this
now you can see both of these are
selected so that's how that works
now the opposite of that is we can match
any value that ends with a specific
value and for that we use the dollar
sign so let's put that in here and let's
take a look at our code here our HTML
code and what do we want a key off let's
key off Oh
so we'll say anything that ends in O
we're going to select that and of course
there's only one language attribute that
has that so we'll put that in here we'll
put the letter O let's go ahead and save
this and if this works only this one
should be selected right because only
this element should be targeted so let's
refresh our page and yes it worked
because we said anything that ends in O
so again that's how that works
now there's also another way that we can
target the value and that is to select
the value that is anywhere in the
attribute value and in that case we use
the wild-card symbol and it goes right
where the dollar sign was now let's go
ahead and target anything that has u.s.
in it so we'll put US and so that means
that this first element should only be
selected and again this wildcard allows
us to select a value anywhere inside the
attribute value so let's go ahead and
save this will refresh this and of
course our first paragraph is selected
so that's how these attribute
selectors work and again I will put all
of this code and a review of these
selectors in the description of this
video