March 1Mar 1 Administrators CSS Selector Reference CSS Selectors CSS selectors are used to "find" (or select) the HTML elements you want to style. Use our CSS Selector Tester to demonstrate the different selectors. CSS Simple Selectors The simple selectors select elements based on element-name, id, and class. In addition, there is the universal selector (*). Selector Example Example description element p Selects all <p> elements #id #firstname Selects the element with id="firstname" * * Selects all elements .class .introp.intro Selects all elements with class="intro"Selects all <p> elements with class="intro" CSS Attribute Selectors The attribute selector selects HTML elements with a given attribute set. Selector Example Example description [attribute] [lang] Selects all elements with a lang attribute [attribute=value] [lang="it"] Selects all elements with lang="it" [attribute~=value] [title~="flower"] Selects all elements with a title attribute containing the word "flower" [attribute|=value] [lang|="en"] Selects all elements with a lang attribute value equal to "en" or starting with "en-" [attribute^=value] [href^="https"] Selects all elements with a href attribute value that begins with "https" [attribute$=value] [href$=".pdf"] Selects all elements with a href attribute value ends with ".pdf" [attribute*=value] [href*="w3schools"] Selects all elements with a href attribute value containing the substring "w3schools" CSS Nesting Selector Selector Example Example description & & Applies styles for an element within the context of another element ★ +1 Sign in to track progress
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.