In this section, we will explore CSS selectors and the concept of specificity, which are fundamental to styling web pages effectively. Understanding how selectors work and how specificity is calculated will help you write more efficient and maintainable CSS.

CSS selectors are patterns used to select the elements you want to style. Here are some of the most common types of selectors:

1. Universal Selector (*): Selects all elements.

   * {
     margin: 0;
     padding: 0;
   }
   

2. Type Selector: Selects all elements of a given type.

   p {
     color: blue;
   }
   

3. Class Selector (.classname): Selects all elements with a specific class.

   .highlight {
     background-color: yellow;
   }
   

4. ID Selector (#idname): Selects a single element with a specific ID.

   #header {
     font-size: 24px;
   }
   

5. Attribute Selector: Selects elements based on an attribute or attribute value.

   input[type="text"] {
     border: 1px solid #ccc;
   }
   

6. Pseudo-class Selector: Selects elements based on their state.

   a:hover {
     color: red;
   }
   

7. Pseudo-element Selector: Selects and styles a part of an element.

   p::first-line {
     font-weight: bold;
   }
   

8. Combinator Selectors: Select elements based on the relationship between them.

   • Descendant Selector ( ): Selects all elements that are descendants of a specified element.

     div p {
       color: green;
     }
     

   • Child Selector (>): Selects all elements that are direct children of a specified element.

     ul > li {
       list-style-type: none;
     }
     

   • Adjacent Sibling Selector (+): Selects an element that is the next sibling of a specified element.

     h1 + p {
       margin-top: 0;
     }
     

   • General Sibling Selector (~): Selects all siblings of a specified element.

     h1 ~ p {
       color: gray;
     }
     

Specificity determines which CSS rule is applied when multiple rules could apply to the same element. It is calculated based on the types of selectors used in the rule.

Specificity is calculated using a point system, often represented as a three-part value (a, b, c):

• a: Counts the number of ID selectors.
• b: Counts the number of class selectors, attribute selectors, and pseudo-classes.
• c: Counts the number of type selectors and pseudo-elements.

Consider the following CSS rules:

• Rule 1 Specificity: (1, 1, 1)

  • 1 ID selector (#content)
  • 1 class selector (.highlight)
  • 1 type selector (p)

• Rule 2 Specificity: (0, 1, 0)

  • 0 ID selectors
  • 1 class selector (.highlight)
  • 0 type selectors

Since Rule 1 has a higher specificity, it will be applied over Rule 2.

Let's see a practical example to understand how specificity works:

In this example, the paragraph will be blue because the ID selector has the highest specificity.

Given the following CSS rules, calculate the specificity for each:

Solution:

• Rule A Specificity: (0, 0, 3)
• Rule B Specificity: (0, 1, 1)
• Rule C Specificity: (1, 1, 1)

Write CSS rules to ensure that the following paragraph is styled with a red color, regardless of other styles applied:

Solution:

Understanding CSS selectors and specificity is crucial for writing effective stylesheets. By mastering these concepts, you can control which styles are applied to your elements and resolve conflicts between different CSS rules. In the next module, we will delve into media queries, which are essential for creating responsive designs.