Locating Elements on Your Page: A Guide to CSS Selectors

When creating modifications in Optimal UX, you need to tell it which elements to change. CSS selectors are like search patterns that help you find the right elements. This guide will help you understand how to use selectors effectively.

Basic Element Selection

The simplest way to select elements is by their HTML tag name. For example:

• button finds all button elements
• h1 finds all main headings
• p finds all paragraphs
• * finds all elements (use with caution!)

Selecting by Class and ID

Classes and IDs are special attributes that developers use to identify elements:

Using Classes

• button.primary finds buttons with the “primary” class
• .alert finds any element with the “alert” class
• p.intro finds paragraphs with the “intro” class

Using IDs (for unique elements)

• button#submit-form finds the button with ID “submit-form”
• div#main-content finds the div with ID “main-content”

Finding Elements by Their Position

Sometimes you need to target elements based on their position in the page:

Parent-Child Relationships

• nav > a finds links that are direct children of navigation elements
• article p finds paragraphs anywhere inside articles

Using Pseudo-Selectors

Pseudo-selectors help you find elements based on their position or state. OptimalUX supports these position-based pseudo-selectors:

• :first-child finds elements that are the first within their parent
• :nth-child(n) finds elements that are the nth child of their parent
• :first-of-type finds the first occurrence of each type of element
• :nth-of-type(n) finds elements that are the nth occurrence of their type

Note: :last-child and :last-of-type are not supported. This is because Optimal UX uses a high-performance streaming approach that processes elements as they appear, making it impossible to determine the “last” element until the entire page is loaded. For better performance, use specific nth-child values instead.

Examples of pseudo-selector usage:

li:first-child /* First item in any list */
tr:nth-child(2) /* Second row in a table */
h2:first-of-type /* First h2 heading */
p:nth-of-type(3) /*

Using Pseudo-Elements

Optimal UX supports the ::before and ::after pseudo-elements, allowing you to insert content before or after an element’s main content. These pseudo-elements generate CSS-based visual elements without modifying the HTML structure.

Selecting by Attributes

You can find elements based on their attributes and values:

Basic Attribute Selection

• img[alt] finds images that have an alt attribute
• input[required] finds required form fields

Exact Value Matching

• input[type="submit"] finds submit buttons
• a[target="_blank"] finds links that open in new tabs

Partial Value Matching

• [class*="button"] finds elements with “button” anywhere in their class
• [href^="https"] finds secure external links
• [src$=".pdf"] finds links to PDF files

Special Attribute Matches

• [lang|="en"] finds elements with English language or dialect (en, en-US, etc.)
• [data-category~="electronics"] finds elements where “electronics” is one of the space-separated values

Case Sensitivity Options

• [title="Download" i] matches “DOWNLOAD”, “download”, etc.
• [title="Download" s] matches exactly “Download”

Excluding Elements

The :not() selector lets you exclude elements that match certain patterns:

• button:not(.disabled) finds all buttons except those with the “disabled” class
• input:not([type="hidden"]) finds all visible input fields

Best Practices

1. Start Specific: Begin with the most specific selector that will work for your needs. It’s easier to broaden your selection later than to narrow it down.
2. Test Your Selectors: Before making modifications, verify that your selector targets exactly the elements you want to change. Remember that the same selector might match different elements across different pages.
3. Consider Performance: When possible, use more specific selectors instead of broad ones. For example, div.product is more efficient than div [class*="product"].
4. Plan for Position-Based Selection: Since last-child selectors aren’t available, plan your selections using first-child or specific nth-child values instead.

Common Examples

For Headers and Navigation

nav > .main-link
header h1:first-of-type
.logo[href^="/"]

For Content Areas

For Forms

form > input[required]
button[type="submit"]
.form-field[data-validation="email"]

Remember that the key to effective modifications is selecting exactly the right elements. Take time to verify your selectors before making changes, and always test your modifications across different pages where the selector might match.