The basic classification of CSS selectors

CSS selectors are the core component of style sheet languages, used to precisely target elements in HTML documents and apply style rules. Selectors can be classified in various ways—by matching pattern, combination relationship, or functional characteristics—with each type demonstrating unique value in specific scenarios.

Basic Selectors

Basic selectors form the foundation of the CSS selector system and include the following four main types:

1. Element Selector
   Directly matches HTML tag names, with low specificity but broad coverage:

   p {
     color: #333;
     line-height: 1.5;
   }
   

2. Class Selector
   Matches elements via the class attribute, reusable and supports multiple class names:

   <!-- HTML -->
   <button class="btn btn-primary">Submit</button>
   

   .btn-primary {
     background-color: #0066cc;
     padding: 8px 16px;
   }
   

3. ID Selector
   High-specificity selector for unique elements, often used for anchor positioning:

   #header-nav {
     display: flex;
     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
   }
   

4. Universal Selector
   Matches all elements in the document, commonly used for global style resets:

   * {
     margin: 0;
     box-sizing: border-box;
   }
   

Attribute Selectors

Precisely matches elements based on their attributes, supporting various matching patterns:

• Existence matching:

  [disabled] {
    opacity: 0.6;
    cursor: not-allowed;
  }
  

• Exact value matching:

  input[type="password"] {
    font-family: monospace;
  }
  

• Substring matching (^= for starts with, $= for ends with, *= for contains):

  a[href^="https"]::after {
    content: "🔒";
    margin-left: 2px;
  }
  

Pseudo-class Selectors

Dynamic selectors based on element states or document structure:

1. User Action Pseudo-classes

   a:hover {
     text-decoration: underline;
   }
   input:focus {
     outline: 2px solid #4d90fe;
   }
   

2. Structural Pseudo-classes

   li:nth-child(2n) {
     background: #f5f5f5;
   }
   :root {
     --main-color: #3498db;
   }
   

3. Form State Pseudo-classes

   input:checked + label {
     font-weight: bold;
   }
   :valid {
     border-color: #2ecc71;
   }
   

Pseudo-element Selectors

Creates virtual elements for special styling:

p::first-line {
  font-variant: small-caps;
}
blockquote::before {
  content: "“";
  font-size: 3em;
  opacity: 0.2;
}

Combinators

Establishes relationships between elements using connectors:

1. Descendant Combinator (space)

   article p {
     text-indent: 2em;
   }
   

2. Child Combinator (>)

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

3. Adjacent Sibling Combinator (+)

   h2 + p {
     margin-top: 0;
   }
   

4. General Sibling Combinator (~)

   h1 ~ div {
     border-top: 1px dashed #ccc;
   }
   

Selector Specificity Calculation

When rules conflict, specificity determines application order. Calculation rules:

• Inline styles: 1000
• ID selectors: 100
• Class/attribute/pseudo-class: 10
• Element/pseudo-element: 1

Example:

#nav .item.active {} /* 100 + 10 + 10 = 120 */
body header#main h1 {} /* 1 + 100 + 1 = 102 */

Selector Performance Optimization

Principles for writing efficient selectors:

1. Avoid deep nesting:

   /* Not recommended */
   body div#wrapper ul li a {}
   
   /* Recommended */
   .nav-link {}
   

2. Prefer class selectors over attribute selectors:

   /* Slower */
   [data-status="active"] {}
   
   /* Faster */
   .active-item {}
   

3. Limit universal selector scope:

   /* Performance impact */
   * {}
   
   /* Better */
   .container * {}
   

Modern CSS Additions

1. Logical Combination Pseudo-classes

   :is(section, article) h1 {
     font-size: 2rem;
   }
   :where(.dark-theme, .light-theme) button {
     padding: 12px;
   }
   

2. Direction-aware Pseudo-classes

   :dir(rtl) {
     text-align: right;
   }
   

3. Scoped Selectors

   @scope (.card) to (.footer) {
     :scope {
       border: 1px solid #eee;
     }
   }