Project Study: Five Advanced CSS

Today, I am going to share five advanced CSS selectors from Udemy course. Then, I will create a simple project to explain how we apply each selectors.

Those five advanced selectors are:

Star Selector: Whatever we do, it will apply to every single element.

Descendant Selector: The way that descendant selector works is that it takes two or more tag names or two or more selectors and you chain them together.

Adjacent Selector: With adjacent selector, it will let us select elements that comes after another element.

Attribute Selector: The attribute selector is a way to select elements based of any attribute.

Nth of Type: The way of nth of type works is it takes a number like three or five and then it selects every end of a specific element. So if I want to select every fifth paragraph, I could use nth of type.

I know it is not clear to understand without apply them in a project and see how they work.

Now I am going to create a simple web page named "Selector Demo", which includes some lists and hyperlinks.

The HTML Part:

The Web page looks like:

Now I am going to apply those five selectors in the CSS file.

Star Selector

I want every element on the page has a border, so the simple way is to use star selector: 

*{border: 1px solid lightgrey:}

Descendant Selector

As we can see, there are three hyperlinks on the last list, and I want to make those links text in red color, so I use descendant selector:

 li a{ color: red:}.

Adjacent Selector

There are two h4 headers, one is "Popular Vegetables", and the other one is "Popular Sites". Under each header, there is a short list. I want to add a blue border to each list. Therefore, I use adjacent selector: 

h4+ul { border: 4px solid blue;}.

Attribute Selector

There are four hyperlinks on this page, and two of them are linking to Google. I want to give a yellow background to Google links. As we know, the hyperlink attribute is " a href=", so the attribute selector will be: 

a[href="http://www.google.com"] { background: yellow;}

Nth of Type

I build three lists on the page. I want the even number on every list has a green background, so I use the nth of type:

 li:nth-of-type(even) { background: green;}

The final outcome will be: