Websites · 1 min read
CSS Selectors Guide: Simple and Attribute Selectors
When you add custom CSS to a funnel, website, form or other builder, selectors tell the browser which elements your styles apply to.
Simple selectors
Simple selectors target elements by tag name, ID or class.
| Selector | Example | What it does | | --- | --- | --- | |
element | p | Selects all <p> elements | | #id | #firstname | Selects the element with id="firstname" | | .class | .intro | Selects all elements with class="intro" | | element.class | p.intro | Selects <p> elements with class="intro" | | * | * | Selects all elements | | a, b | h1, h2 | Selects all <h1> and all <h2> elements |Example:
``
css .intro { color: #1a73e8; font-weight: 600; } ``Attribute selectors
Attribute selectors target elements by their attributes and values. They're handy for styling form inputs and links.
| Selector | Example | What it does | | --- | --- | --- | |
[attr] | [target] | Elements with a target attribute | | [attr="value"] | [type="email"] | Elements where type is exactly email | | [attr~="value"] | [title~="sale"] | Attribute contains the word sale | | [attr^="value"] | a[href^="https"] | Attribute starts with https | | [attr$="value"] | a[href$=".pdf"] | Attribute ends with .pdf | | [attr*="value"] | a[href*="checkout"] | Attribute contains checkout anywhere |Example:
``
css input[type="email"] { border: 2px solid #1a73e8; } ``Tips
- Give elements a custom class or ID in the builder's advanced settings, then target it in your CSS.
- More specific selectors win. If a style doesn't apply, check whether another rule is more specific.
- Preview on desktop and mobile after adding CSS.