Join James Williamson for an in-depth discussion in this video Strategies for writing selectors, part of CSS: Selectors.
- View Offline
- Exercise Files
- Although there are some best practices…to consider when writing selectors,…there is no overall best approach…to architecting styles for sites.…In fact, the overall strategies for writing them…are likely to vary from project to project.…I mean, selectors aren't written in a vacuum after all.…They have to fit together intelligently…to form the overall style sheet.…And they're driven by variables…like the structure of the HTML…as well as the overall and long term project goals.…Because of this, you're likely…to employ multiple strategies for writing selectors…that change based on a project's needs.…
So here are a few things for you to consider…when planning your approach to writing selectors.…First, how abstracted should your styles be?…By their very nature, selectors are tied…to the structure of the HTML.…I mean, it is what they're designed to do.…However, in some cases this coupling can prevent projects…from scaling or changing over time.…Take these selectors, which could be used…to style a modal window.…Now it's pretty easy to look at 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.