CSS Selector Cheat Sheet

Understanding CSS selectors is key to writing efficient and maintainable stylesheets, ensuring that your design is consistent, responsive, and adaptable to various screen sizes and devices.

🎯TL;DR

• CSS Selectors: Key to applying styles to specific HTML elements based on tag, class, id, or position.
• Basic Selectors: Universal (*), Type (element), Class (.className), and ID (#idName).
• Advanced Selectors: Attribute selectors, combinators, pseudo-classes (e.g., :hover), and pseudo-elements (::before, ::after).
• Use Cases: Grouping selectors to save time, using pseudo-classes to define element states, and refining layout.
• Automation: Essential for web scraping, testing frameworks, and automating tasks by locating elements in HTML/XML.

Check also:

👉The Ultimate XPath Cheat Sheet

👉Playwright Cheat Sheet

👉Cypress Cheat Sheet

👉Selenium Cheat Sheet

What are CSS Selectors?

CSS selectors are a crucial part of CSS (Cascading Style Sheets) that allow web developers to apply styles to specific HTML elements on a webpage. By using selectors, you can target elements based on attributes such as tag name, class, id, or even their position in the DOM. Selectors make it easy to control the look and feel of a website with precision.

Types of CSS Selectors

There are several types of CSS selectors, each serving a unique purpose. They allow you to target elements in various ways:

Basic Selectors

• Universal Selector (*****): Targets all elements on the page.
• Type Selector (**element**): Targets specific HTML elements (e.g., div, p, a).

Class and ID Selectors

• Class Selector (**.className**): Targets elements with a specific class attribute.
• ID Selector (**#idName**): Targets an element with a specific ID attribute.

Attribute Selectors

• **[attribute]**: Targets elements with a specific attribute.
• **[attribute=value]**: Targets elements where the attribute is equal to a specific value.

Combinators

• Descendant Selector (**ancestor descendant**): Targets elements nested within another element.
• Child Selector (**parent > child**): Targets direct child elements.
• Adjacent Sibling Selector (**element + element**): Targets an element immediately preceded by a specific sibling.
• General Sibling Selector (**element ~ element**): Targets all elements that are preceded by a specific sibling.

Pseudo-Classes

• **:hover**: Targets an element when the user hovers over it.
• **:nth-child(n)**: Targets the nth child of a parent element.
• **:first-child**: Targets the first child of a parent element.

Pseudo-Elements

• **::before**: Inserts content before an element.
• **::after**: Inserts content after an element.
• **::first-letter**: Styles the first letter of an element.

Advanced Selectors and Use Cases

• Grouping Selectors: When you need to apply the same style to multiple selectors, use commas to separate them. This CSS rule makes it easier to manage styles by targeting elements that match the selectors without duplicating code.
• Pseudo-Class Selectors: These selectors define a special state of an element. For example, :hover applies styles when the user hovers over an element, while :nth-child(n) selects elements based on their position in a parent.
• Combinator Selectors: Selectors like the descendant selector (ancestor descendant) target elements nested inside other elements. These are frequently used in frontend design for controlling layout and structure.

CSS Selectors Cheat Sheet

CSS Selector Example

Scenario: Automating web testing using CSS selectors to locate and interact with elements on a login page.

Example:

You're testing the functionality of a login page using an automation tool like Selenium or Cypress. CSS selectors help you locate specific HTML elements on the page to perform actions like entering text, clicking buttons, and verifying results.

Steps:

1. Locate the Email Input Field Use a CSS selector to target the email input field by its id attribute:

   css

   input#email

   In your test script:

   javascript

   cy.get('input#email').type('user@example.com');

2. Target the Password Field Use the input field's name attribute to locate it:

   css

   input[name="password"]

   Test script:

   javascript

   cy.get('input[name="password"]').type('securePassword123');

3. Click the Login Button Target the login button using its class name:

   css

   button.login-btn

   Test script:

   javascript

   cy.get('button.login-btn').click();

4. Verify Successful Login Check if a success message is displayed by selecting an element using its ID:

   css

   div#login-success

   Test script:

   javascript

   cy.get('div#login-success').should('be.visible');

Benefits:

• Precision: CSS selectors can target elements with specific attributes or hierarchies.
• Automation: Ensures consistency and efficiency in testing user interactions.
• Speed: Tests are executed faster with precise element selection.

In this case, CSS selectors enable you to efficiently locate and test interactions on the login page, making the process automated and repeatable.

Tips for Writing Efficient CSS

1. Master Various Types of CSS Selectors: Use element-based and attribute-based selectors efficiently to locate HTML elements by tag, class name, or attribute values. Refer to a comprehensive CSS selectors cheatsheet for quick access.

2. Group and Combine Selectors: Save time by grouping selectors or using combinators like the descendant or child combinators. For instance, you can separate styling for multiple selectors in a single CSS rule:

   h1, h2 {
     font-weight: bold;
   }
   div > p {
     margin: 10px;
   }
   

3. Leverage Pseudo-Classes for Dynamic States: Use pseudo-classes like :hover and :last-child to define a special state of an element without JavaScript. Example:

   button:hover {
     background-color: lightblue;
   }
   li:last-child {
     border: none;
   }
   

4. Optimize for Performance: Avoid using overly broad selectors like * that can slow down browsers. Instead, use specific selectors like .className or #id to target single elements or those that match a given type.

5. Maintain Readable Syntax: Write clean CSS code by organizing styles logically. Use tools like Codecademy or infographics to understand how to define and transform your styles.

6. Enhance Automation: In NodeJS or frontend testing tools, CSS selectors help locate elements for interactions, such as filling forms or validating layouts. Example using Cypress:

   cy.get('input[name="email"]').type('user@example.com');
   

7. Use CSS Selectors in Web Scraping: For many web scraping tasks, selectors like div > a can locate an email address or element efficiently. Combine them with JavaScript for advanced functionality.

8. Focus on Accessibility: Write selectors that work well with screen readers and maintain compatibility with XML or HTML files. Validate your CSS code against the site's privacy policy to ensure compliance.

9. Test and Debug: Use browser developer tools to test selectors and ensure they target the intended elements. Inspect the following code snippet for errors:

   div.row > span {
     display: block;
   }
   

10. Get Started with Resources: Explore CSS selectors cheatsheets and courses on Codecademy to refine your knowledge. Understanding selectors' properties and criteria will transform your ability to build efficient layouts.

Additional Resources

• CSS-Tricks: Comprehensive guides on CSS.
• MDN Web Docs: Authoritative documentation on CSS.

By following this guide and practicing regularly, you can unlock the full potential of CSS selectors to create efficient, maintainable, and dynamic web pages.

FAQ on CSS Selectors

What is a CSS Class Selector?

A CSS class selector is used to target elements with a specific class attribute. You define it using a period (.) followed by the class name.

Example:

.highlight {
  color: red;
}

This targets any element with the class="highlight" attribute.

What is a CSS Descendant Selector?

The CSS descendant selector targets all elements that are descendants of a specified parent element.

Example:

div p {
  font-size: 16px;
}

This selects all <p> elements that are inside a <div>.

What is the CSS :not Selector?

The :not selector excludes elements that match a specified selector.

Example:

p:not(.intro) {
  font-style: italic;
}

This applies styles to all <p> elements except those with the class intro.

What is a CSS Selector Wildcard?

The wildcard selector (*) matches all elements.

Example:

* {
  margin: 0;
  padding: 0;
}

This resets the margin and padding for all elements.

What is the CSS Selector to Contain Text?

CSS itself does not have a built-in contains selector for text, but you can use attribute selectors to match elements based on attribute values that include specific text.

Example:

a[href*="example"] {
  color: blue;
}

This selects all <a> elements where the href attribute contains the word "example."

For actual text matching, JavaScript or XPath is required.

What is the CSS First-Child Selector?

The :first-child pseudo-class targets the first child of its parent.

Example:

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

This applies styles to the first <li> in a list.

Happy (automated) testing!