Selectors

Last updated on

The :target pseudo selector in CSS matches when the hash in the URL and the id of an element are the same. For example, if the current URL is: http://csspark.com/#categories And this existed in the HTML: <section id=”categories”> Content </section> This selector would match: :target { background: yellow; } And that section element would have a yellow background. With

Continue reading →

Last updated on

Using your cursor select this sentence. Notice how as you select the text a background color fills the space? You can change the background color and color of selected text by styling::selection. Styling this pseudo element is great for matching user-selected text to your site’s color scheme. p::-moz-selection { color: red} p::selection { color: red;

Continue reading →

Last updated on

The :root selector allows you to target the highest-level “parent” element in the DOM, or document tree. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling content. In the overwhelming majority of cases you’re likely to encounter, :root refers to the<html> element

Continue reading →

Last updated on

The :required pseudo class selector in CSS allows authors to select and style any matched element with the required attribute. Forms can easily indicate which fields must have valid data before the form can be submitted, but allows the user to avoid the wait incurred by having the server be the sole validator of the user’s input. Let’s say we have an

Continue reading →