Nth-Child Selector Example
Selecting article(first-of-type) with nth-child element in article selected; background changed to blue.
WDV205: Advanced CSS
2-1: Demonstrate use of Child, Attribute, and Combinator Selectors
In this assignment you are to demonstrate the using of the types of selectors covered in this unit. You may accomplish this in a single web page OR using three different web pages (such as in a web site). You may create new web pages OR modify an existing web page project.
Create or modify a web page that demonstrates the use of the following:
- First child and/or nth child selector - 5 points
- Attribute selectors. Use a minimum of TWO types of attribute selectors using the ~, ^, or | attribute combinators. - 5 points
- Combinators - 5 points
- +
- >
- ~
- Challange: Try using combinators with pseudo-classes or pseudo-elements.
- one or more of the following:
Div Parent Element
Attribute Selector Examples
1. Attribute selector used to style image with a border by using 'duck' in 'alt' attribute.
2. Attribute selector used to style image with a purple border that starts with 'cat' in 'alt' attribute.
Combinator Selector Example
1. Combinator selector used to select paragraph by choosing the first paragraph child in an element that contains the characters "combinator" in the class element.
2. Combinator selector used to select images and put a black border around all images inside parent element article:last-child within the section element.
