Pseudo classes in css

• 000 Learn CSS • 001 Box Model • 002 Selectors • 003 The cascade • 004 Specificity • 005 Inheritance • 006 Color • 007 Sizing Units • 008 Layout • 009 Flexbox • 010 Grid • 011 Logical Properties • 012 Spacing • 013 Pseudo-elements • 014 Pseudo-classes • 015 Borders • 016 Shadows • 017 Focus • 018 Z-index and stacking contexts • 019 Functions • 020 Gradients • 021 Animations • 022 Filters • 023 Blend Modes • 024 Lists • 025 Transitions • 026 Overflow • 027 Backgrounds • 028 Text and typography • 029 Conclusion and next steps The CSS Podcast - 015: Pseudo-classes An audio version of this module Say you've got an email sign up form, and you want the email form field to have a red border if it contains an invalid email address. How do you do that? You can use an :invalid CSS pseudo-class, which is one of many browser-provided pseudo-classes. See the Pen A pseudo-class lets you apply styles based on state changes and external factors. This means that your design can react to user input such as an invalid email address. These are covered in the Unlike pseudo-elements, which you can learn more about in the classes hook onto specific states that an element might be in, rather than generally style parts of that element. Interactive states The following pseudo-classes apply due to an interaction a user has with your page. :hover Browser support • Chrome 1, Supported 1 • Firefox 1, Supported 1 • Edge 12, Supported 12 • Safari 2, Supported 2 If a user has a pointing device like a mou...

The CSS :has selector helps you select elements that contain elements that match the selector you pass into the :has() function. It’s essentially a “parent” selector, although far more useful than just that. For example, imagine being able to select all s but only when they contain a . That’s what we can do: div:has(p) CodePen Embed Fallback That’s great I also love how gosh darn readable it is; you don’t ever have to have seen this line of code to understand what it does. Another way you can use :not is for margins: ul li:not(:last-of-type) So every element that is not the last item gets a margin. This is useful if you have a bunch of elements in a card, like this: CodePen Embed Fallback … and also :is() and :where() CSS Selectors Level 4 is also the same spec that has the :is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) More Info So that’s it! :has should be quite useful to use soon, and its cousins :is and :not can be fabulously helpful already and that’s only a tiny glimpse — just three CSS pseudo-classes — that are available in this new spec. • Adrian Bece — :has, A Native CSS Parent Selector (And More) • Bramus Van Damme — :has()selector is way more than a “Parent Selector” • Michelle Barker — Honestly just being able to style links that wrap images would be a godsend; so many sites I build have these overly fancy link styles that fall apart when the content is an inline image. I’ve had to write various fixes that patch the markup or require some wrap...

The pseudo-select :is() in CSS allows you to write compound selectors more tersely. For example, rather than writing: ul li, ol li Browser support Mobile / Tablet Android Chrome Android Firefox Android iOS Safari 114 113 114 14.0-14.4 To get the best support, you might look at also using :matches (with vendor-prefixed :any filling in some gaps) for the general functionality. And, What’s interesting to note is that :is() was introduced after :matches which was introduced after :any. It’s sort of like :any is being replaced by :matches which is being replaced by :is(), with the details changing along the way. Always neat to see how these things evolve. To get maximum support for “Matches-Any” requires using a mix of the historical names, as browser handling is currently a hodgepodge of vendor-prefixes and experimental settings at this point. /* These are deprecated, but still necessary in some browsers: */ :-moz-any(div, p) > em CodePen Embed Fallback History Originally, this pseudo-class was named :any() and was implemented with limited vendor-specific support: /* Never actually worked */ :any(div, p) > em The goal of the “Matches Any” selector is to make complex groupings of selectors easier to write, which is exactly what we got and more with :is(). More information • :-moz-any support to Gecko • • :is() pseudo-class. • Related

In this tutorial, you will create CSS pseudo-classes and learn how and why to use them. You will also practice using the :hover pseudo-class that allows us to change the style of an element when the user’s cursor is hovering over it. Pseudo-classes are CSS classes that are activated only during certain states. For example, the pseudo-class :hover can be used to change the appearance of an image or text element when the user’s cursor hovers over the element. The pseudo-class :visited is often used to change the color of a link after a user has clicked on it. Pseudo-classes are declared in CSS by appending a : and the name of the pseudo-class to a tag, class, or ID selector. This pseudo-class will then be automatically applied to any HTML content assigned the tag, class, or ID of the pseudo-class. You do not need to add any extra code to an HTML element to make a pseudo-class work. To follow this tutorial, make sure you have set up the necessary files and folders as instructed in a previous tutorial in this series Let’s now try a practical exercise to explore how pseudo-classes work. First, make sure you have set up the necessary files and folders as instructed in a previous tutorial in this series Erase everything in your styles.css file (if you added content from previous tutorials) and add the pseudo-class below to your document: styles.css img :hover In this code snippet, you have added the highlighted pseudo-class :hover to the tag selector. Save the file and return t...

Bold choices. But, thanks to CSS classes, you can do exactly that. CSS classes enable you to apply unique style properties to groups of HTML elements to achieve your desired web page appearance. In this post, we'll cover the fundamental terms you need to know, like CSS class, class selector, and CSS specificity. We'll also walk through how to create a class in CSS and use it to style your web pages. A CSS class is an attribute used to define a group of HTML elements in order to apply unique styling and formatting to those elements with CSS. Let’s look at an example of how CSS classes work. Below, we have a simple HTML page with three headings ( h2 elements) and three paragraphs ( p elements). Notice how the second heading, third heading, and final paragraph are styled differently than the rest — this is because these elements have been assigned the class bright. Looking at the CSS, we see the .bright class="bright". See the Pen You can use CSS classes to group HTML elements and then apply custom styles to them. You can make classes and apply them to text, buttons, How to Create a Class in CSS Let’s try making a CSS class from scratch. Say you want to make a paragraph of text and style certain words for more emphasis. You can do this by creating a CSS class for these special words, then assigning this class to individual words with span tags. Start by writing out the HTML elements you want to style. In this case, it’s a paragraph of text: Our marketing software and service ...