In-page navigation has its own useful CSS pseudo-class: :target. In this video, learn to use :target to highlight a relative passage within in-page navigation.
- [Instructor] The next selector … I'd like to tell you about is the target selector. … And initially I thought the target selector … had to do with a target in a link, … like target equals blank. … But actually the target has to do with … navigation bars that are going to navigate you … within a given page. … So here what I have is a little bit of html … where I have a table of contents … and maybe I have a really long article of some kind … and this is going to be able to skip me down … to the various parts of the article. … As we scroll down you'll see that … I have some headings that are calling … for part one and part two. … So by styling target over here, … we simply just say target … and the background color of gold. … What this is going to do is nothing … that's immediately obvious here … in the display of this webpage, … but when I do click on my part one here, … it will highlight that particular part of the article … and the same here for part two. … That's kind of nice when you have a page like this …
- 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
The power of selectors1m 8s
1. Review of Basic CSS
2. Combinator Selectors
3. Attribute Selectors
Simple attribute selectors2m 47s
4. Pseudo-Classes, Pseudo-Elements, and the Universal Selector
5. Choosing Selectors
- 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.Cancel
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.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.