About Me
cover

Level Up Your Web Design: Essential CSS Selectors You Need to Know

2/24/2024, 12:00:00 AM

CSSCSS SelectorWeb DesignFrontendWeb Development

The magic behind visually stunning websites lies not in spells and potions, but in the power of code. And within the world of web development, CSS selectors play a crucial role in transforming the raw structure of HTML into stunning visual experiences.

In this article, we will discuss the essential CSS selectors that you need to know to level up your web design skills.

What are CSS Selectors?

As name suggests, CSS selectors are used to select the HTML elements that we want to style. They are the part of CSS rule set that actually selects the content we want to style.

/* Selector */
h1 {
  /* Property and value */
  color: red;
}

In the above example, h1 is the selector that selects all the h1 elements in the HTML document and applies the style to them.

Types of CSS Selectors

There are several types of CSS selectors, each with its own unique way of selecting elements. Here are some of the most commonly used CSS selectors:

  1. Simple selectors
  2. Combinator selectors
  3. Attribute Selector
  4. Pseudo-class Selector
  5. Pseudo-element Selector

1. Simple Selectors

Simple selectors are the most basic type of selectors. They select elements based on their tag name, class, or ID. For example:

/* Tag name selector */
h1 {
  color: red;
}
 
/* Class selector */
.my-class {
  color: blue;
}
 
/* ID selector */
#my-id {
  color: green;
}

2. Combinator Selectors

Combinator selectors are used to select elements based on their relationship with other elements. There are four types of combinator selectors:

  • Descendant combinator (space): Selects an element that is a descendant of another element.
  • Child combinator (>): Selects an element that is a direct child of another element.
  • Adjacent sibling combinator (+): Selects an element that is the adjacent sibling of another element.
  • General sibling combinator (~): Selects an element that is a sibling of another element. (Note Nested)

For example:

/* Descendant combinator */
/* Selects all p elements inside a div */
div p {
  color: red;
}
 
/* Child combinator */
/* Selects all p elements that are direct children of a div */
div > p {
  color: blue;
}
 
/* Adjacent sibling combinator */
/* Selects first h1 elements that are placed inside div element */
div + h1 {
  color: green;
}
 
/* General sibling combinator */
h1 ~ p {
  color: yellow;
}

3. Attribute Selector

Attribute selectors are used to select elements based on their attributes. There are several types of attribute selectors:

  • [attribute]: Selects elements with the specified attribute.
  • [attribute=value]: Selects elements with the specified attribute and value.
  • [attribute~=value]: Selects elements with the specified attribute and a value that is a space-separated list of words, one of which is exactly "value".
  • [attribute|=value]: Selects elements with the specified attribute and a value that is exactly "value" or begins with "value-" followed by a hyphen.
  • [attribute^=value]: Selects elements with the specified attribute and a value that begins exactly with "value".
  • [attribute$=value]: Selects elements with the specified attribute and a value that ends exactly with "value".
  • [attribute*=value]: Selects elements with the specified attribute and a value that contains the substring "value".

For example:

<body>
  <img src="image.jpg" alt="My Image" />
  <input type="text" id="username" required />
  <div data-category="technology science">Tech Articles</div>
  <a href="#" lang="en-US">Visit Website</a>
  <h2 id="section-1">Section 1</h2>
  <button class="btn-secondary">Secondary Button</button>
  <p style="font-weight: bold;">This text is bold.</p>
</body>
/* [attribute] */
img[alt] {
  border: 1px solid #ddd;
}
 
/* [attribute=value] */
input[type="text"] {
  font-size: 16px;
}
 
/* [attribute~=value] */
div[data-category~="science"] {
  background-color: #f5f5f5;
}
 
/* [attribute|=value] */
a[lang|="en"] {
  color: #007bff;
}
 
/* [attribute^=value] */
h2[id^="section"] {
  text-decoration: underline;
}
 
/* [attribute$=value] */
button[class$="primary"] {
  background-color: #007bff;
}
 
/* [attribute\*=value] */
p[style*="font-weight: bold"] {
  font-style: italic;
}

4. Pseudo-class Selector

Pseudo-class selectors are used to select elements based on their state or position. There are several types of pseudo-class selectors:

  • :active: Selects the active link.
  • :checked: Selects every checked input element.
  • :disabled: Selects every disabled input element.
  • :empty: Selects every element that has no children.
  • :enabled: Selects every enabled input element.
  • :first-child: Selects the first child of its parent.
  • :first-of-type: Selects the first element of its type.
  • :focus: Selects the element that has focus.
  • :hover: Selects the element that the mouse is over.
  • :in-range: Selects input elements with a value within a specified min, max range.
  • :invalid: Selects all input elements with an invalid value.
  • :lang(language): Selects every element in a document that is written in a specified language.
  • :last-child: Selects the last child of its parent.
  • :last-of-type: Selects the last element of its type.
  • :link: Selects all unvisited links.
  • :not(selector): Selects every element that is not a specified element.
  • :nth-child(n): Selects every element that is the nth child, regardless of type, of its parent.
  • :nth-last-child(n): Selects every element that is the nth child, regardless of type, of its parent, counting from the last child.
  • :nth-last-of-type(n): Selects every element that is the nth child, of a particular type, of its parent, counting from the last child.
  • :nth-of-type(n): Selects every element that is the nth child, of a particular type, of its parent.
  • :only-of-type: Selects every element that is the only child, of a particular type, of its parent.
  • :only-child: Selects every element that is the only child of its parent.
  • :optional: Selects input elements with no "required" attribute.
  • :out-of-range: Selects input elements with a value outside a specified range.
  • :read-only: Selects input elements with the "readonly" attribute specified.
  • :read-write: Selects input elements with the "readonly" attribute NOT specified.
  • :required: Selects input elements with the "required" attribute specified.
  • :root: Selects the document's root element.
  • :target: Selects the current active #hash element.
  • :valid: Selects all input elements with a valid value.
  • :visited: Selects all visited links.

For example:

/* Selects the first child of a div element */
div:first-child {
  color: red;
}
 
/* Selects the first paragraph of a div element */
div p:first-of-type {
  color: blue;
}
 
/* Selects the input element that has focus */
input:focus {
  color: green;
}

5. Pseudo-element Selector

Pseudo-element selectors are used to style a specific part of an element. There are several types of pseudo-element selectors:

  • ::after: Insert content after the content of an element.
  • ::before: Insert content before the content of an element.
  • ::first-letter: Selects the first letter of an element.
  • ::first-line: Selects the first line of an element.
  • ::selection: Selects the portion of an element that is selected by a user.

For example:

/* Insert content after the content of a div element */
div::after {
  content: " - The End";
}
 
/* Insert content before the content of a div element */
div::before {
  content: "The Beginning - ";
}
 
/* Selects the first letter of a paragraph */
p::first-letter {
  font-size: 150%;
}
 
/* Selects the first line of a paragraph */
p::first-line {
  font-weight: bold;
}
 
/* Selects the portion of a paragraph that is selected by a user */
p::selection {
  background-color: #007bff;
  color: #fff;
}

Conclusion

CSS selectors are the building blocks of web design. By mastering these essential CSS selectors, you can take your web design skills to the next level and create visually stunning websites that stand out from the crowd.

I hope this article has helped you understand the power of CSS selectors and how they can be used to create beautiful and engaging web experiences.

© 2024 | Ifty64bit | All Right Reserved.