Show List
Tutorials > CSS > CSS Selectors

CSS Selectors

CSS selectors are used to select specific HTML elements on a web page and apply styles to them. There are various types of CSS selectors. Selectors are divided into different categories:

  • Simple : Selecting the HTML element based on id, class or type.
  • Attribute : Selecting the element based on its attributes
  • Combination: Selecting element based on parent or siblings element
  • Pseudo Class: Selecting element based on it's state
  • Pseudo Element: Selecting element based on its part

Simple Selectors

 
Class selector: Below code will apply style to all the elements on the HTML page with class classA
.classA{
    padding: 10px;
    margin: 10px;
}
Id selector: Below code will apply the style to the element with idA
#idA{
    padding: 10px;
    margin: 10px;
}
Element type: Below code will apply the style to all the <p> elements
p {
    padding: 10px;
    margin: 10px;
}
Multiple: Below code will apply the style to all the <p> elements with class classB
p.classB {
    padding: 10px;
    margin: 10px;
}
Group: Below code will apply the style to all the h1 elements and p elements
h1, p {
    padding: 10px;
    margin: 10px;
}

Attribute Selectors

Below code will apply the style to all div elements that have lang attribute. 
div[lang] {
    color: #ccc;
}
Below code will apply the style to all the input elements with attribute type as text
input[type="text"] {
    color: #ccc;
}
Below code will apply the style to all the input elements with attribute type other than text
input[type~="text"] {
    color: #ccc;
}
Below code will apply the style to all the elements that have class name starting with primary
[class^="primary"] {
    color: #ccc;
}
Below code will apply the style to all the elements that have class name ending with stop
[class$="stop"] {
    color: #ccc;
}
Below code will apply the style to all the elements that contain mini in the class name
[class*="mini"] {
    color: #ccc;
}

Combination Selectors


  • Blank space is used to select the descendants (multi level)
  • > symbol is used to select the children
  • + symbol is used to select adjacent sibling
  • ~ symbol is used to select all siblings

Below code will select all the h2 elements inside a div element
div h1 {
    color: #ccc;
}
Below code will select all paragraph elements that are children of div element
div > p {
    color: #ccc;
}
Below code will select the first h2 element that is placed immediately after the div of class classA
div.classA + h2 {
    color: #ccc;
}
Below code will select all h2 elements that are next siblings of the div of class classA
div.classA ~ h2 {
    color: #ccc;
}

Pseudo Class

Here are commonly used pseudo classes:
  • :active - To select active element. Example div:active
  • :link - To select un visited link. Example a:link
  • :visited - To select visited link. Example a:visited
  • :checked - To select the element that is checked. Example input:checked
  • :disabled - To select disabled elements. Example input:disabled
  • :enabled - To select enabled elements. Example input:enabled
  • :first-child - To select first child. Example h1:first-child
  • :focus - To select the element that has focus. Example input:focus
  • :hover - To select the element on mouse hover. Example div:hover

Below code will select and apply the style to all enabled input boxes
input:enabled {
    background-color: rgb(242, 241, 241);
    border-color: rgb(8, 91, 91);
}

Pseudo Elements

It is used to style specific part of the element. Here are commonly used pseudo elements:
  • ::first-letter - To select the first letter of the element. Example input::first-letter
  • ::first-line - To select the first line of the element. Example div::first-line
  • ::selection - To select the portion selected by user. Example div::selection
  • ::after - To insert the content after the element. Example div::after
  • ::before - To insert content before the element. Example div::before

Below code will double the size of the first letter of div with class home.
div.home::first-letter {
    font-size: 200%;
}


Next: CSS Layout

    Leave a Comment

  • captcha text