Basic selectors (element, class, ID)

Basic Selectors (Element, Class, ID)

CSS selectors are the core part of style rules, used to specify which HTML elements should apply specific styles. Basic selectors include element selectors, class selectors, and ID selectors, which are the most fundamental and commonly used types of selectors.

Element Selector

The element selector directly uses the HTML tag name as the selector, matching all elements of that type in the document. This selector is typically used to set global styles or reset default styles.

<p>This is a paragraph</p>
<div>This is a div</div>

/* All p elements will apply these styles */
p {
  color: blue;
  font-size: 16px;
}

/* All div elements will apply these styles */
div {
  background-color: #f0f0f0;
  padding: 10px;
}

Element selectors can be combined to set the same styles for multiple elements:

h1, h2, h3 {
  font-family: 'Arial', sans-serif;
  margin-bottom: 15px;
}

Class Selector

The class selector starts with a dot (.) followed by the class name. It can be applied to any HTML element with the corresponding class attribute. An element can have multiple classes, and a class can be applied to multiple elements.

<div class="box warning">Warning box</div>
<p class="warning">Warning text</p>
<button class="btn primary">Primary button</button>

/* All elements with the warning class */
.warning {
  color: red;
  border: 1px solid red;
  padding: 10px;
}

/* Class selector for specific elements */
div.box {
  width: 200px;
  height: 200px;
  background-color: #eee;
}

/* Combined class selector */
.btn.primary {
  background-color: #0066cc;
  color: white;
}

Class selectors are very flexible and can be used to create reusable style components. For example, you can create a button system:

.btn {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.btn.primary {
  background-color: #0066cc;
  color: white;
}

.btn.secondary {
  background-color: #6c757d;
  color: white;
}

.btn.danger {
  background-color: #dc3545;
  color: white;
}

ID Selector

The ID selector starts with a hash (#) followed by the ID name. It is used to select elements with a specific ID attribute. IDs should be unique within a document.

<div id="header">Website header</div>
<nav id="main-navigation">Main navigation</nav>
<section id="content">Main content area</section>

#header {
  background-color: #333;
  color: white;
  padding: 20px;
}

#main-navigation {
  background-color: #f8f9fa;
  border-bottom: 1px solid #ddd;
}

#content {
  margin: 20px auto;
  max-width: 1200px;
}

ID selectors have higher specificity than class selectors, meaning that when styles conflict, the ID selector's styles will override the class selector's styles:

<div id="special-box" class="box">Special box</div>

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
}

#special-box {
  background-color: red; /* This style will override .box's background color */
}

Combining Selectors

Basic selectors can be combined to create more specific selection rules:

<ul class="menu">
  <li class="item active">Home</li>
  <li class="item">Products</li>
  <li class="item">About Us</li>
</ul>

/* Only select the item class within the menu class */
.menu .item {
  padding: 8px 12px;
  display: inline-block;
}

/* More specific selection - active class within the menu class */
.menu .active {
  background-color: #007bff;
  color: white;
  font-weight: bold;
}

Selector Specificity

When multiple selectors target the same element, CSS has a specificity rule to determine which style will be applied:

1. ID selector: Each ID selector adds 100
2. Class selector, attribute selector, and pseudo-class: Each adds 10
3. Element selector and pseudo-element: Each adds 1

/* Specificity: 1 */
div {
  color: black;
}

/* Specificity: 10 */
.container {
  color: blue;
}

/* Specificity: 100 */
#main-content {
  color: red;
}

/* Specificity: 1 + 10 = 11 */
div.special {
  color: green;
}

/* Specificity: 10 + 10 = 20 */
.container .highlight {
  color: purple;
}

Practical Example

Creating a simple card component:

<div class="card" id="featured-card">
  <h2 class="card-title">Featured Product</h2>
  <div class="card-content">
    <p>This is our featured product description...</p>
    <button class="btn primary">Buy Now</button>
  </div>
</div>

/* Basic card style */
.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  max-width: 300px;
  overflow: hidden;
}

/* Card title */
.card-title {
  background-color: #f8f9fa;
  padding: 12px 16px;
  margin: 0;
  font-size: 1.2em;
  border-bottom: 1px solid #ddd;
}

/* Card content */
.card-content {
  padding: 16px;
}

/* Special style for featured card */
#featured-card {
  border: 2px solid #007bff;
}

#featured-card .card-title {
  background-color: #007bff;
  color: white;
}

Selector Best Practices

1. Prefer class selectors over ID selectors because they are more flexible and reusable.
2. Avoid overusing element selectors as they are less specific and may impact performance.
3. Keep selectors concise and avoid overly long selector chains.
4. Use meaningful names, such as .btn-primary instead of .blue-button.
5. Consider using naming conventions like BEM to organize class names.

/* BEM naming example */
.menu {
  /* Block style */
}

.menu__item {
  /* Element style */
}

.menu__item--active {
  /* Modifier style */
}

Browser Compatibility Considerations

Basic selectors are well-supported in all modern browsers, including:

• Element selectors
• Class selectors
• ID selectors

Even older browsers like IE6 support these basic selectors. However, when using CSS preprocessors like Sass or Less, nested selectors are ultimately compiled into these basic selectors.