about this tutorial
Goal
The objective of this tutorial is to teach you the fundamentals, features and implementation of Advanced CSS3 Selectors to your webpage’s stylesheet.
Lessons
This tutorial will teach users the functionality and the proper use of the following in Advanced CSS3 Selectors:
CSS3 Child Selectors
Not Selectors
Universal Selectors
[Attribute]
Adding Content
Prerequisite
For this tutorial, you will need to know all the basic fundamentals of HTML and CSS. If you don’t remember or feel you are not ready, please review the previous website, School of HTML and CSS.
What are css3 advanced selectors?
What are Advanced CSS3 Selectors? With CSS3, web developers can apply visual features such as animations, and 3D effects to their websites. Also, developers can make sites more responsive using CSS3. While these features are a great improvement for developers, they are often done with id and class selectors. Although, if you want to have a specific multi–article layout with images, this example page relies on just id and class selectors which can get rather cluttered in CSS. This is an opportunity for developers use Advanced CSS3 Selectors.
Advanced CSS3 Selectors are used to make stylizing elements more precise and the process easier.
css3 child selectors
If you have a number of the same elements like paragraphs and lists but want to stylize the first or second paragraph or item in in the list, you can use Child Selectors. These selectors will act as the parent and the designated element as the child. This means that the parent will denote the child element. To implement Child Selectors, you must have the element selector which is followed by a colon then the child selector. The following is a list of Child Selectors:
:first-child Will select the first designated element. For instance, li:first-child signifies that the first item in every list can be stylized.
:nth-child() Will select the second, or a higher numbered designated element. For instance, li: nth-child(3) signifies the third item in every list can be stylized. Also, besides numbers, you can use keywords like (odd) or (even). Formulas like (3n+1) can be used.
:only-child Will select the only designated element that is the child. For instance, li:only-child signifies that every item in every list can be stylize.
:last-child Will select the last designated element that is the child. For instance, li:last-child signifies the last item in every list can be stylize.
Example:
li:nth-child(2){
background:#109870;
}
Result:
It should be noted, that of-type selectors have the identical functions as Child Selectors. For instance, p:first-of-type is the same as p:first-child and p:nth-of-type(n) is the same as p:nth-child(n) and so on.
:not selector
The :not() selector does the polar opposite of Child Selectors. Instead of selecting the designated element to stylize, the not selector selects every element without id and class attributes, accept the designated element. To implement :not(), you must have the element selector, which must be followed by a colon and the element selector in the parenthesis.
:not(p) {
color:#ff0000;
}
Universal Selectors
With CSS3 Advanced Selectors, you have option to select every single element on your webpage with one selector. By simply using the asterisk symbol * in CSS, developers can give all elements the same style.
Example:
* {
color:purple;
}
[attribute]
Up until this point, we have worked with advanced selectors that signifies elements without id and class attributes. Now we move on to advanced selectors that use elements with attributes. To implement [attribute], you must have the element selector which must be followed by left and right brackets. Inside the brackets contains the name of the attribute.
Example:
input[type="text"] {
padding:10px;
background-color:F7274F;
}
Adding Content
One of the great uses of Advanced CSS3 Selectors is the ability to add webpage content through CSS. Here is a breakdown of the CSS.
Before and After
:before Will add content before the designated element. For instance, p:before can insert a logo before an element.
:after Will add content after the designated element. For instance, p:after can insert a link after an element.
Content property
This property will add links, titles, text, images or any other type of content. The Content property is best used with the :before and :after selectors. The following are often used Content property values:
attr(name of attribute) This value will assign content to become an attribute to the selector.
url() This value will link to a website, image, or so on.
Example:
correct:after {
content:url(IMG/icon-checkmark-circled.png);
}
Result:
Summary
Advanced CSS3 Selectors give web developers more and easier options to stylize elements on their webpage If you want or need to see alternate explanations and tutorials of Advanced CSS3 Selectors, check out these links and videos:
Tutorial: The 30 CSS Selectors you Must Memorize
Tutorial: Lesson 3 Complex Selectors
Video: Advanced CSS3 Selectors | First of Types and Last of Type
Video: CSS Basics (Part5) — Advanced Selectors
practice
Now, after learning how to use Advanced CSS3 Selectors, it’s time to practice. Please find the HTML code editor with a preloaded HTML structure below. Your objective is to practice with Advanced CSS3 Selectors within the style tag. If you don’t like the HTML code editor, then use a new HTML5 and CSS3 document.