:not is a powerful way of selecting items that are exceptions to a given rule. In this video, use the CSS :not selector to select items that do not match a given selector.
- [Instructor] The not sudo class is super, super handy. … It's going to allow you to select things … which do not meet a certain criteria. … For example, here on this web page, … you'll notice that we have two images. … One of these images is coded correctly in the HTML … in that it has its alt tag. … But the second image does not have its alt tag. … So let's say you're debugging your site … and you need to quickly identify which of your images … does not have an alt tag. … We can write a wonderful selector to do that. … In this case we're going to say, for all of the image tags, … let's not select those that are missing. … Basically we're saying the ones that do not have … the alt attribute. … We don't need to test for a value, … we just want to test for a presence or absence … of that alt attribute. … Five pixels, solid orange border around those images. … And if we go ahead and do that, … you'll see here we have selected the one kitten picture … that is indeed missing its alt tag. …
Author
Released
5/2/2019- Targeting classes and IDs
- Working with group selectors
- Targeting element attributes
- Targeting links with pseudo-class selectors
- Targeting child elements and empty elements
- Targeting parent, child, and sibling elements
- Best practices for CSS
- The impact of CSS selectors on performance
Skill Level Intermediate
Duration
Views
Related Courses
-
HTML & CSS: Creating Forms
with Clarissa Peterson2h 30m Beginner -
Introduction to CSS
with Carrie Dils1h 58m Beginner
-
Introduction
-
The power of selectors1m 8s
-
-
1. Review of Basic CSS
-
CSS terminology2m 58s
-
Groups of selectors1m 52s
-
Compound selectors3m 19s
-
-
2. Combinator Selectors
-
Descendant selectors3m 36s
-
Parent-child selectors3m 51s
-
3. Attribute Selectors
-
Simple attribute selectors2m 47s
-
-
4. Pseudo-Classes, Pseudo-Elements, and the Universal Selector
-
Understanding :not2m 53s
-
:root and :empty4m 27s
-
5. Choosing Selectors
-
Conclusion
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Understanding :not