Advanced Selectors

Use your knowledge of advanced CSS selectors to create a pattern or image on the grid provided. This exercise is meant to help you practice reading the DOM tree and making accurate and precise selections with CSS.

Getting Started

Clone this repo:

$ cd ~/dev
$ git clone [email protected]:YWebCA/selectors-exercise.git

All your work goes in pattern.css. A checklist of things to try to include has been provided. You don't have to adhere to it strictly, but do try a variety of techniques.

Turning it In

Copy your finished pattern.css and name it yourName.css. Attach yourName.css to the appropriate card in Trello. We will demo everyone's exercise in class.

Tips

Each quadrant is organized differently. Use Chrome Developer Tools to inspect the DOM.

Feel free to experiment but please do not change the HTML file; the instructor will provide a clean one for you at the demo (so you can't depend on your changes).

CSS animation and other shenanigans are allowed.