start learning
Image 1

CSS Selectors

CSS selectors are used to target and select specific HTML elements on a web page for styling purposes. They allow you to apply styles, such as colors, fonts, sizes, margins, and more, to the selected elements.


CSS Selectors

Element Selector



h1 {
  color: red;
}


Class Selector



.my-paragraph {
  font-size: 20px;
  color: blue;
}

Hello, world!


ID Selector


#my-div {
  background-color: yellow;
  padding: 10px;
}

Content

Descendant Selector


div p {
  font-weight: bold;
}

Text


Child Selector


ul > li {
  color: red;
}

  • item1
  • item2

Attribute selector


input[type="text"] {
  border: 5px solid gray;
  padding: 5px;
}