Also known as 'pseudo elements' and 'pseudo classes'
(Elements are the whole command eg a:hover {...} and the
Class is the function part eg :hover)
Placed inside the <style> </style> area
eg...
<style>
p { styles}
</style>
Go and visit CSS Selector References
for more on things like...
:visited, :link, :only-child, :read-only, :valid, [attribute], etc
tag
the tag on its own selects ALL instances of that tag
eg...
h1 {color:red;}
will change the color of the text in ALL h1 tags to be red
.classname
the dot (.) represents a tag with a class="classname" given to it
eg...
.myClassName {color:red;}
will change the color of the text in ALL tags with a class="myClassName" associated to it
#idname
the hash (#) represents a tag with an id="idname" given to it
eg...
#myId {color:red;}
will change the color of the text in ALL tags with an id="myId" associated to it
tag.classname
the tag, followed by a .classname selects tags that also that class attched to it
eg...
h1.myClassName {color:red;}
will change the color of the text in ALL h1 tags that ALSO have the class="myClassName" attached.
tag#idname
the tag, followed by a hash (#) represents a tag with an id="idname" attached to it
eg...
h1#myId {color:red;}
will change the color of the text in ALL h1 tags with an id="myId" associated to it
You can also list it like, for example...
h1, h2, h3 {color: red;}
this will change the color of the text in ALL h1 AND h2 AND h3 tags
h1, h2.myClassName, h3#myId {color: red;}
this will change the color of the text in ALL h1 tags
AND the h2 tags with a class="myClassName"
AND the h3 tags with an id="myId"
div p.myClassName {color: red;}
this will change the color of the text in ALL 'p' elements (with a class="myClassName") that
are within the div element (see
example
)
.myClass p.myClassName {color: red;}
this will change the color of the text in ALL 'p' elements (with a class="myClassName") that
are within an element with the class="myClass"
div > p.myClassName {color: red;}
this will change the color of the text in ALL 'p' elements (with a class="myClassName") that
has a parent div element (see
example
)
div + p {color: red;}
this will change the color of the text in the a 'p' element that
is directly AFTER a div element (see
example
)
div ~ p {color: red;}
this will change the color of the text in every 'p' element that
is a sibling of the div ...(see
example
)
[href="nnnn"]
the[ ] represents an attribute
eg...
a[href="index.html"] {color:red;}
will change the color of the text in ALL anchor (a) tags with an attribute of href="index.html"
(see
example
)
[href*="index"]
the *= means any anchor tag with an attribute of href="..." and the
text 'index' anywhere within the quotes (" ")
eg...
[href*="index"] {color:red;}
will change the color of the text in ALL anchor (a) tags with an
attribute of href="nnnindexnnn"
[href~="index"]
the ~= means any anchor tag with an attribute of href="..." and the
word 'index' anywhere within the quotes (" ")
(Note...index would be found but indexes would not)
eg...
[href~="index"] {color:red;}
will change the color of the text in ALL anchor (a) tags with an
attribute of href="nnn index nnn"
[href^="index"]
the ^= means any anchor tag with an attribute of href="..." and the
text inside the quotes MUST START with "index"
eg...
[href^="index"] {color:red;}
will change the color of the text in ALL anchor (a) tags with an
attribute of href="indexnnnn"
[href$=".html"]
the $= means any anchor tag with an attribute of href="..." and the
text inside the quotes MUST END with ".html"
eg...
[href$=".html"] {color:red;}
will change the color of the text in ALL anchor (a) tags with an
attribute of href="nnnn.html"
A few examples would be :-
:active
:hover
::first-letter
::first-child
::first-line
When you click on a link it becomes ACTIVE so you could say
a:active {font-size: 2em;}
When you hover your mouse over an element you could, eg underline it
.MyHover:hover {color:red;}
For example,
You can HOVER your mouse over the text that says
HOVER HERE to see
it change to a red color.
And you can CLICK the link that says CLICK ME to see
it double the original text size.
NOTE...
I am also using (in the <Styles> area) the command
p.fLet::first-letter {
font-size: 200%;
color: #8A2BE2;
}
in order to change the FIRST character of EVERY <p> element that has a class="fLet".
More examples would be :-
When you use the :focus in, for example, an INPUT box you could set
the background colour whenever you are about to enter text in it.
input:focus {background-color: yellow;}
Eg
Click on each input box below to see it in action