Basic CSS: Selecting Elements, ID and Class

In CSS, you can select elements, class, and id to apply styles and customize elements on your web page. Here is a detailed guide on how to use them:

Selecting Elements

To select all instances of a specific HTML element, use the element name as a selector. For example, p selects all <p> tags in the document.

Selecting Class

To select elements with the same class, use a dot "." followed by the class name. For example, .my-class selects all elements with the class my-class.

To select elements with multiple classes, use dots "." and list the class names separated by spaces. For example, .class1.class2 selects elements with both class1 and class2 classes.

Selecting id

To select a specific element by its id, use a hash "#" followed by the element's id. For example, #my-id selects the element with the id my-id.

Combining Element, Class, and ID Selections

You can combine element, class, and id selections to target specific elements with specific classes and ID.

For example, div.my-class#my-id selects the <div> element with the class my-class and the ID my-id.

Here is a specific example of selecting elements, class, and id in CSS:

/* Select all <p> tags */
p {
  color: blue;
}

/* Select elements with the class "my-class" */
.my-class {
  background-color: yellow;
}

/* Select the element with the ID "my-id" */
#my-id {
  font-weight: bold;
}

/* Combine element, class, and ID selections */
div.my-class#my-id {
  border: 1px solid black;
}

By using element, class, and id selections, you can easily select and style specific elements or groups of elements on your web page.