How can i apply css stylesheet to single specific element?

Question

I am new to web development, I have tried css stylesheet with simple HTML element and it worked well, when i specified element name:

label {
    color: green         


        

Answer 1

You can do that using html attributes such:

• class, id, data-nameOFData for any of HTML element

.class {
  color: blue
}

#id {
  color: green
}

div[data-test] {
  color: yellow
}

class
id
data

• name , type and for for input elements

label[for="textInput"] {
  color: aqua
}

input[type="text"] {
  color: brown
}

label

• href for anchors tags and src for images

a {
  padding: 10px;
  background-color: deepskyblue
}

a[href*="google"] {
  background-color: yellow
}

youtube
google

---

Also you can select any element without defining any attribute for it if you know his index using CSS pseudo selectors :first-child , :nth-child(n) , :last-child , :first-of-type , :nth-of-type(n) , :last-of-type , :nth-of-type(even), :nth-child(odd) MDN , w3Schools.

div {
  width: 100px;
  height: 50px;
}

div:nth-of-type(even) {
  background-color: cornflowerblue
}

div:nth-child(3) {
  background-color: coral
}

1
2
3
4
5
6