CSS Selectors 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:

1. Basic Selectors
   • Universal Selector (*****): Targets all elements on the page.
   • Type Selector (**element**): Targets specific HTML elements (e.g., div, p, a).
2. 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.
3. Attribute Selectors
   • **[attribute]**: Targets elements with a specific attribute.
   • **[attribute=value]**: Targets elements where the attribute is equal to a specific value.
4. 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.
5. 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.
6. 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.

CSS Selectors in Web Development

CSS selectors play a crucial role in modern web development. Whether you're working on a NodeJS project, building a website with frontend tools like Codecademy, or handling HTML files, the ability to precisely select HTML elements ensures your styles apply efficiently.

Selectors are also a key part of automation tools like web scraping scripts that need to locate specific data in XML or HTML documents. For instance, in many web scraping tasks, CSS selectors can be used to locate an element like an email address based on its attributes or position in the DOM.

Tips for Using CSS Selectors Effectively

1. Use Grouping: Save time by grouping selectors when multiple elements share the same styles. Instead of writing separate rules, combine them in one line.
2. Be Specific: For better performance, avoid overusing the universal selector (*) or overly general type selectors, as they affect all elements.
3. Test Automation Tools: In addition to designing styles, CSS selectors are widely used in automation tools like browser testing frameworks, where they help to locate elements for interaction.
4. Selectors in Layout: Complex selectors can help refine your page layout, controlling how elements appear in relation to each other.

Get Started with CSS Selectors Cheatsheet

To get started, try practicing on small projects and exploring more about selectors through courses on Codecademy and other websites. You’ll learn not only how to structure your stylesheets but also how to use selectors in advanced ways to automate and streamline your CSS development. CSS selectors are a powerful tool that lets you pinpoint exactly which elements to style. Whether you're targeting elements by their type, class, ID, or position in the DOM, selectors give you the flexibility to create dynamic, visually appealing web pages. Keep this cheat sheet handy for quick reference while writing your CSS stylesheets!

Happy (automated) testing!