Join James Williamson for an in-depth discussion in this video Targeting fragment identifiers, part of CSS: Selectors.
- Often instead of targeting an entire page,…a link will be used to target a specific region of the page…using what's known as a fragment identifier.…Using the target pseudo-class selector…we can give these regions unique styling…when the URL contains the targeted fragment IT.…Now if that sounds confusing, that's because…this is one selector that's actually easier to understand…by seeing it work then by describing it.…So let's take a look.…Now just to give you an example here,…you see in the first paragraph I have a link…that says site.com/resources and then #FAQ…if you've ever seen that.…
That would link to a specific region of the page.…Well what target allows us to do,…if I scroll down into the syntax you can see,…is that when an element is the target…of that URL fragment identifier,…we can style it a little bit differently,…than the other elements on the page.…Now if I scroll down in the bottom…towards this example area, you can see that…I've got three links here, for section one,…section two, and section three.…
Author
Released
5/19/2015- 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
Duration
Views
Related Courses
-
CSS: Advanced Typographic Techniques
with James Williamson3h 14m Intermediate -
CSS with LESS and Sass
with Joe Marini1h 57m Intermediate -
HTML5: Graphics and Animation with Canvas
with Joe Marini3h 7m Intermediate
-
Introduction
-
Welcome45s
-
Using the exercise files1m 10s
-
-
1. Basic Selectors
-
How selectors work2m 19s
-
Element selectors7m 38s
-
Targeting classes7m 50s
-
Targeting IDs5m 2s
-
Descendent selectors10m 30s
-
Universal selector7m 13s
-
Grouping selectors6m 53s
-
-
2. Attribute Selectors
-
Specifying attribute values5m 49s
-
String matching7m 17s
-
3. User Action Pseudo-Class Selectors
-
Targeting links7m 8s
-
Defining focus7m 49s
-
-
4. Structural Selectors
-
Targeting child elements6m 55s
-
Targeting children by type10m 6s
-
Targeting empty elements8m 13s
-
Targeting inline content8m 32s
-
The negation selector8m 4s
-
Generated content11m 44s
-
Combining selectors9m 45s
-
-
5. Combinators
-
6. Matching Patterns
-
Targeting multiple instances7m 19s
-
Matching patterns by type5m 44s
-
Counting backwards5m 34s
-
7. Writing Efficient Selectors
-
Selectors and performance4m 58s
-
Properly structuring HTML2m 53s
-
-
Conclusion
-
What's next in selectors?3m 24s
-
Additional resources3m 21s
-
- 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: Targeting fragment identifiers