CSS3 Advanced Selectors

MAIN OBJECTIVE

In this tutorial we will touch on CSS selectors, specifically first child, nth child, first of type, nth of type, not, before, after and content.

SUB OBJECTIVES

• What are CSS3 Advanced Selectors?
• First Child
• First of Type
• nth Child & nth of Type
• Not
• Before, After, & Content

PREREQUISITES

Before beginning this tutorial you should already have a strong understanding of HTML fundamentals and how to apply them to your web page. You should also have a strong foundation in CSS.

CSS3 Advanced Selectors?

CSS selectors are what you use to select the elements of your webpage that you want to style. Advanced CSS selectors are something that were added in CSS3 and allows for a greater level of customization. Advanced selectors allow you to better define what parts of your website you want to look and function a specific way in an easier way. Lets take a look at some of these advanced selectors and what they do.

First Child

The first child rule is simply that. It will select the first child of whatever the parent element is that you are styleing. This could be any type of tag in the parent, as long as it's the first in the parent tag it will be selected. So if you are making a list and you want the first <li> element of every <ul> to be italic then you could use the first-child selector to do just that. Something to be aware of though is that this is only selecting the first <li> of the parent. So if you have a <div> with multiple <ul>'s this would select the first <li> that would appear in each <ul>.

Here is the HTML that we used.

    	
	
        	
List Item One
            
List Item Two
            
List Item Three
            
List Item Four
        
        
        
	
        	
List Item One
            
List Item Two
            
List Item Three
            
List Item Four
        
        
   
        
   

Here is the CSS that we used to make this happen

.parent li:first-child{
    font-style:italic;
    font-size:24px;
    background-color:#333;
    color:#FFF;
}   

Since each <ul> is considered the parent of the <li>'s inside of it the first <li> in each <ul> gets selected and styled accordingly.

First of Type

First of type is similar to first child, but it allows you to be more specific about what gets selected within the parent element. The idea is, if you have multiple tags in a parent element first of type allows you to choose the first occurance of a tag in it's container.

Here is the HTML that we used.

    
    	
Hello, and welcome to my example!
        
        
 I'll show you how first of type works
        
            

                
First paragraph of a new div
                
                
Second paragraph of a new div
                
                
Third paragraph of a new div
            
        
        
Lets wrap this up shall we
   

Here is the CSS we used to make this happen

.parent li:first-child{
    font-style:italic;
    font-size:24px;
    background-color:#333;
    color:#FFF;
}   

You can see that the first <p> of each parent is styled regardless of what comes before it.

nTH Child and nTH of Type

Nth child allows you to specifically select elements of the parent by the order that they are arranged. You can choose by a specific number or you can choose multiples by selecting even and odd. With nth child we can style every 3rd <li> in our <ul>.

Here is the HTML we used.

    	
	
        	
List Item One
            
List Item Two
            
List Item Three
            
List Item Four
        
        
        
	
        	
List Item One
            
List Item Two
            
List Item Three
            
List Item Four
        
        

Here is the CSS we used to make this happen

.parent_1 li:nth-child(3){ /* Here we are selecting the 3rd child in each parent*/
	padding-left:30px;
	font-style:italic;
	color:#FFF;
	background-color:#39ae6f;
} 

Nth of type allows you to choose the first type of tag that you want and get specific about which ones. You can choose by a specific number or you can choose multiples by selecting even and odd. Below we will select only the odd numbers.

Here is the HTML we used.

    	
	
        	
List Item One
            
List Item Two
            
List Item Three
            
List Item Four
        
        
        
	
        	
List Item One
            
List Item Two
            
List Item Three
            
List Item Four
        
        

Here is the CSS we used to make this happen

.parent_2 li:nth-child(odd){
	font-style:italic;
	color:#FFF;
	background-color:#39ae6f;
}  

These come in very useful when styleing tables or large lists that you want to break up stylistically.

Not

The not selector allows you to assign a specific element of a parent and then it chooses and styles everything else within the parent except for what you have assigned the not selector to. Think of it as using masking tape on a canvas. You put the tape where you don't want paint and then you paint the rest of the canvas leaving the masked area blank.

Here is the code that we used to make this happen

    
This is a heading
                  
    
The first paragraph.
    
The second paragraph.
    
The third paragraph.
    
The fourth paragraph.

.deuce p:not(.the_first){
	background-color:#333;
	color:#FFF;
}

Before, After, & Content

The before and after selectors allow you to place content before or after an element on your page using only CSS which means that you wouldn't have to go back through your HTML to place an image or text as long as you know which element you would like to place it in. This can come in handy if you have repetative content that you would like to place an image text or special character with. Content is just that. It works along with before and after and specifies the content that you are placing before or after and element.

Here is the HTML that we used.

 

    
This is a heading
    
The first paragraph.
    
The second paragraph.
    
The third paragraph.
    
The fourth paragraph.
 
    

Here is the CSS that we used to make this happen

.parent_3 p:before{
	content:"This is ";	
}
	
.parent_3 p:after{
	content:" Division Fifteen Education is the best!";
}

POP QUIZ HOT SHOT!