Understanding CSS Selectors: A Comprehensive Guide

As a student who has just learned CSS selectors, I can tell you that it's an essential part of CSS that allows you to select specific HTML elements and apply styles to them. In this blog, I will share my journey of learning CSS selectors and discuss some of the essential concepts that every beginner should know. I followed the course named "CSS: Selectors" by Jen Kremer on LinkedIn Learning. Here's a link CSS-Selectors

Selector Basics

A CSS selector is used to select one or more HTML elements based on their attributes, classes, IDs, or tag names. You can apply styles to a selected element using CSS properties.

p {
  font-size: 16px;
}

.header {
  background-color: #333;
  color: white;
}

#logo {
  height: 50px;
  width: 50px;
}

Descendant Selector

The descendant selector is used to select elements that are nested inside other elements. The selector consists of two or more selectors separated by a space.

ul li {
  color: red;
}

Child Selector

The child selector is used to select elements that are direct children of another element. The selector consists of two or more selectors separated by a greater than symbol (>).

.container > * {
  margin: 10px;
}

Adjacent Sibling Selector

The adjacent sibling selector is used to select the first element that comes immediately after another element. The selector consists of two or more selectors separated by a plus sign (+).

header + p {
  font-size: 20px;
}

Attribute Selector

The attribute selector is used to select elements based on their attributes. You can select elements based on the attribute name, attribute value, or attribute value with a specific operator.

input[type="text"] {
  background-color: lightblue;
}

a[href*="example.com"] {
  color: green;
}

Pseudo-Class Selector

The pseudo-class selector is used to select elements based on their state or position in the HTML document. Some common pseudo-classes include :hover, :active, and :nth-child().

a:hover {
  text-decoration: none;
}

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

Other Selectors

In addition to the selectors we've already discussed, there are several others that you may find useful in your CSS work.

:has() Selector

The :has() selector allows you to select elements that contain specific content. For example, you can select all div elements that contain a paragraph with the word "example" like this:

div:has(p:contains("example")) {
  background-color: yellow;
}

:is() Selector

The :is() selector allows you to group multiple selectors together and apply styles to all of them. For example, you can apply styles to all h1, h2, and h3 elements like this:

:is(h1, h2, h3) {
  color: blue;
}

:where() Selector

The :where() selector is similar to the :is() selector but allows you to avoid repeating the parent selector. For example,:

:where(h1, h2, h3) {
  color: blue;
}

:not() Selector

The :not() selector allows you to select all elements except for those that match a specific selector. For example, you can select all list items that are not the first child like this:

li:not(:first-child) {
  font-weight: bold;
}

::first-letter Selector

The ::first-letter selector allows you to select the first letter of a block-level element and apply styles to it. For example, you can make the first letter of a paragraph larger and bold like this:

p::first-letter {
  font-size: 24px;
  font-weight: bold;
}

::before and ::after Selectors

The ::before and ::after selectors allow you to insert content before or after an element, respectively. You can use these selectors to add decorative content, such as borders or icons, to your web pages.

li::after {
  content: "✔";
  margin-left: 5px;
}

Form Selectors

In addition to the selectors we've discussed so far, there are also several selectors that are specifically designed for form elements, such as input, select, and textarea.

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

input[type="submit"] {
  background-color: #333;
  color: white;
  padding: 10px 20px;
}

Conclusion

Learning CSS selectors can be challenging, but with practice and perseverance, you can master them and use them to create beautiful and engaging web pages. Whether you're a beginner or an experienced web developer, understanding CSS selectors is essential to your success. I hope this blog has helped you on your journey to learning CSS selectors and has given you a good starting point to continue your learning.