12 CSS Selectors for Your Next Web Development Project

Wyatt Anderson

Examples

1. Hover Selector - This selector allows for text, images, and divs to have hover properties when hovered over with mouse.

2. Checked Selector - This selector allows you to change how the checkbox looks when using the input.

3. In-Range Selector - If the number in the input is changed to the correct amount the styling of the webpage can change.

4. Valid Selector - If the message typed is valid then the styling may change.

5. Read Only Selector - Allows you to select the styling of the readonly attributes.

6. First Letter Selector - Lets you change the first letter in a paragraph to another color, or change font/font size.

7. After Selector - Lets you add text after your paragraphs, using css.

8. Class Selector - Allows you to style classes that you create using .class in css.

9. Id Selector - Allows you to style classes that you create using #id in css.

10. All Selector - Using the * you are able to select all elements in css.

11. Element Selector - One of the most basic selectors which allows you to select almost anything, for example selecting the paragraph would be p.

12. Div and Element Selector - For example if you have a paragrpah in a div named dog then you would put dog p, to style the paragraph in the div dog.