CSS Selector

CSS selectors are used to target and apply styles to specific HTML elements. There are several types of CSS selectors, each with a different way of targeting elements. Here are some of the most commonly used CSS selectors:

  1. Element selector: Targets elements based on their HTML tag. For example, the following selector targets all paragraphs on a web page:
  2. Class selector: Targets elements based on their class attribute. For example, the following selector targets all elements with the class "button":
  3. ID selector: Targets elements based on their ID attribute. For example, the following selector targets the element with the ID "header":
  4. Attribute selector: Targets elements based on the presence or value of an attribute. For example, the following selector targets all elements with an href attribute:
  5. Descendant selector: Targets elements that are descendants of another element. For example, the following selector targets all paragraphs that are descendants of a div:
  6. Child selector: Targets elements that are direct children of another element. For example, the following selector targets all paragraphs that are direct children of a div:
  7. Pseudo-class selector: Targets elements based on their state or position in the document. For example, the following selector targets all links that have been visited:
<!--Element Selector-->

p { /* Styles go here,  */ }


<!-- Class selector -->

.button { /* Styles go here */ } 


<!-- ID selector -->

#header {  /* Styles go here */ }


<!-- Attribute selector -->

a[href] {  /* Styles go here */ }
  

<!-- Descendant selector -->

div p {  /* Styles go here */ }


<!-- Child selector -->

div > p {  /* Styles go here */ }


<!-- Pseudo-class selector -->

a:visited { /* Styles go here */ }

These are just a few examples of the many CSS selectors available. By using these selectors in combination with CSS properties and values, you can create powerful and flexible styles for your web pages.

Next Article ❯