Join James Williamson for an in-depth discussion in this video Targeting classes, part of CSS: Selectors.
- The class attribute has long been used…to add semantic meaning to HTML elements.…It's also a great way to add specific targeting…for element styling as well,…as we can target classes through the use of class selectors.…So I just want to go over really briefly…the syntax of class selectors,…before we go into writing them ourselves.…So essentially, what the class selector allows us to do…is to target any element that has that class attribute.…The example I give here in the first paragraph,…for example, the class selector .author would target…any element with a class attribute of "author."…So if I scroll down a little bit into the syntax section,…you can see that writing the syntax…for class selectors is extremely simple.…
There's just the value of whatever the class attribute is…preceded by a period, and notice that there's no space…between the period and the class attribute itself.…Now, if we want to get a little bit more specific,…we can make them element-specific…by placing another simple selector in front of them.…
- Targeting classes and IDs
- Working with group selectors
- Targeting element attributes
- String matching
- Targeting links with pseudo-class selectors
- Targeting child elements and empty elements
- Targeting parent, child, and sibling elements
- Matching patterns
- Writing efficient selectors
Skill Level Intermediate
CSS: Advanced Typographic Techniqueswith James Williamson3h 14m Intermediate
HTML5: Graphics and Animation with Canvaswith Joe Marini3h 7m Intermediate
1. Basic Selectors
2. Attribute Selectors
3. User Action Pseudo-Class Selectors
4. Structural Selectors
6. Matching Patterns
7. Writing Efficient Selectors
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take 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.