Lesson 5 CSS3 Advanced Selectors

In this lesson you learn about some advanced pseudo selectors which will help you be able to add specific things to your pages just using CSS

Sub Objective

This lesson will consist of some advanced pseudo selectors.

You should have a basic knowledge of html and css .

Here is a list of the pseudo selectors you will be learning in this lesson.

:first-child
:nth-child()
:first-of-type
:not
:after
:before

Get the code for this lesson download here this same link will be at the bottom. This code will have obvious mistakes for you to fix as well it's just a way for you to work on your trouble shooting .

:first-child pseudo selector

The first child pseudo selector allows us to specify which element nested we want to style without ever actually touching the html

This is the css for the example


#first li:first-child {color:#CC99CC;}

Here is the example that the css is talking about.

First
Second
Third
Fourth
Fifth
Sixth
Seventh
Eighth

This is the html for the example.


<ul id="first">
    <li >First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth </li>
    <li>Fifth</li>
    <li>Sixth</li>
    <li>Seventh</li>
    <li>Eighth</li>
</ul>

I used the tag i already had marking that this was my first ul and used it to tell it exactly what ul and then telling the browser that i want to change the color of the first li within that ul.

:nth-child() pseudo selector

With the nth-child pseudo selector it allows us to effect multiple child elements like odd and even numbered elements .

This is the css for the example


   #odd li:nth-child(odd){background-color:#FFF;}

Here is the example that the css is talking about.

First
Second
Third
Fourth
Fifth
Sixth
Seventh
Eighth

This is the html for the example.


        <ul id="odd">
            <li >First</li>
            <li>Second</li>
            <li>Third</li>
            <li>Fourth </li>
            <li>Fifth</li>
            <li>Sixth</li>
            <li>Seventh</li>
            <li>Eighth</li>
        </ul>

:first-of-type pseudo selector

The :first-of-type pseudo selector matches every element that is the first child, of a particular type, of its parent.

This is the css for the example


   .type li:first-of-type{background-color:#FFF;}

This is the example that the css is talking about.

First
Second
Third
Fourth
Fifth
Sixth
Seventh
Eighth

First
Second
Third
Fourth
Fifth
Sixth
Seventh
Eighth

First
Second
Third
Fourth
Fifth
Sixth
Seventh
Eighth

This is the html for the example.


<ul class="type">
    <li >First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth </li>
    <li>Fifth</li>
    <li>Sixth</li>
    <li>Seventh</li>
    <li>Eighth</li>
</ul>
<ul class="type">
    <li >First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth </li>
    <li>Fifth</li>
    <li>Sixth</li>
    <li>Seventh</li>
    <li>Eighth</li>
</ul>
<ul class="type">
    <li >First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth </li>
    <li>Fifth</li>
    <li>Sixth</li>
    <li>Seventh</li>
    <li>Eighth</li>
</ul>

:not pseudo selector

With the :not pseudo selector i am able to identify one element as to not change while simultansouesly changing all the elements around it in the example below you will see me change all the colors of the li elements execept for one.

This is the css for the example


   #colorify li:not(#notcolorify){color:#FF0;}

Here is the example that the css is talking about.

First
Second
Third
Fourth
Fifth
Sixth
Seventh
Eighth

The not pseudo selector allows you to target elements that do NOT match the pseudo selector you are presenting. You can specify anything with this, such as elements, ID's, classes, type's

This is the html for the example.


        <ul id="colorify">
            <li >First</li>
            <li>Second</li>
            <li id="notcolorify">Third</li>
            <li>Fourth </li>
            <li>Fifth</li>
            <li>Sixth</li>
            <li>Seventh</li>
            <li>Eighth</li>
        </ul>

:after pseudo selector

The :after pseudo selector allows us the power to insert content that didnt exist and put after a certain element.

This is the css for the example


   #after li:last-child:after{ content:'!';}

Here is the example that the css is talking about.

First
Second
Third
Fourth
Fifth
Sixth
Seventh
Eighth

This is the html for the example.


        <ul id="after">
            <li>First</li>
            <li>Second</li>
            <li>Third</li>
            <li>Fourth </li>
            <li>Fifth</li>
            <li>Sixth</li>
            <li>Seventh</li>
            <li>Eighth</li>
        </ul>

:before pseudo selector

The :before pseudo selector allows us the power to insert content that didnt exist and put it before a certain element.

This is the css for the example


   #before li:first-child:before{ content:'This is ';}

Here is the example that the css is talking about.

First
Second
Third
Fourth
Fifth
Sixth
Seventh
Eighth

Any attribute can be targeted as such, in the format attr(name-of-attribute). If you'd like to insert something into the HTML to use for a CSS content purpose (but nothing else), you could use the new data- attribute prefix in HTML5.
All the major browsers (Firefox 3+, Safari 3+, Chrome 3+, Opera 10+, and Internet Explorer 8+) support CSS content with the :after/:before.

This is the html for the example.


        <ul id="before">
            <li>First</li>
            <li>Second</li>
            <li>Third</li>
            <li>Fourth </li>
            <li>Fifth</li>
            <li>Sixth</li>
            <li>Seventh</li>
            <li>Eighth</li>
        </ul>

Check out W3 Schools for more selectors.