CSS3 Selectors Practice

Type the code, run it in your browser, and change the CSS values.

1. Class Selector

Class 1 Example

This paragraph uses class1.

Class 2 Example

This paragraph uses class2.

Element + Class Selector

2. ID Selector

Student Name Area

This is a unique special box.

3. Attribute Selector

Attribute name selector

Exact value selector

List matching selector

Hyphen matching selector

Starts with selector

Ends with selector

Contains text selector

4. Pseudo-classes

Move your mouse over this link: W3C Website

Click the input box:

5. Structural Pseudo-classes

6. Pseudo-elements

CSS pseudo-elements can style a special part of an element. For example, we can style the first letter or the first line.

Use ::before and ::after to add content with CSS.

7. Descendant Selector

Descendant Selector Example

8. Child Selector

Direct Child h3

This paragraph is not inside the div.

9. Adjacent Sibling Selector

Adjacent Selector Title

This paragraph is immediately after h3.

This paragraph is not immediately after h3.

10. General Sibling Selector

Sibling Selector Title

First sibling paragraph after h3.

Second sibling paragraph after h3.

11. Group Selector

Group Selector Title

This paragraph uses group selector style.

12. Student Mini Assignment

Please make your own profile card below. Change the text and CSS values.

My Profile

Name: Sangam khanal

Country: Nepal

Favorite Color:Blue

Goal: I want to learn HTML and CSS