Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Dynamic pseudo-class selectors

From: CSS: Core Concepts

Video: Dynamic pseudo-class selectors

In this movie, I want to take a closer look at pseudo-class selectors, starting with the most common pseudo-class selectors, the dynamic group of pseudo-class selectors that allows us to style links and link states, and the target pseudo-class selector. So I have the pseudo-class.htm file open from the 02_14 folder, and again there is not a lot going on here in this page. Let's just take a quick look at the code. We have an unordered list with four links into it: one's going to a page called products, about us, contact us, and sign up! None of these pages really exist except for the products page.

Dynamic pseudo-class selectors

In this movie, I want to take a closer look at pseudo-class selectors, starting with the most common pseudo-class selectors, the dynamic group of pseudo-class selectors that allows us to style links and link states, and the target pseudo-class selector. So I have the pseudo-class.htm file open from the 02_14 folder, and again there is not a lot going on here in this page. Let's just take a quick look at the code. We have an unordered list with four links into it: one's going to a page called products, about us, contact us, and sign up! None of these pages really exist except for the products page.

We don't have to open it, but it is going to allow us to check out the whole visited link thing. And we have another paragraph that has a link inside of it, and this one doesn't have an href attribute. It just has an id. So this would be more of an anchor link that allows us to link to certain section of a page. That's a pretty common technique. And we have a pseudo-class selector that allows us to target those elements as well. So let's go ahead and get into writing our styles. And the first thing I want to do is I'm going to scroll up, because I've got a rule here that doesn't have a selector and this is going to be sort of our basic default link styling if you will.

So I'm just going to go right up there and add the very simple element selector a, so that I'll target any link on the page. I want to save that, and I'm just going to preview that in one of my browsers. And when I do that, I can see that it's targeting all of our links, even this sort of anchor target element that we don't really want to have that styling. So right now these guys all have the styling. They're looking nice. It looks more like a menu, but I don't want this to have that styling at all. Well, one of the things that you can do--I'm just going to jump back into my code real quick-- well one of the things that you can do is you can use a pseudo-class selector to limit it to just actual active links.

So I'm going to type in after the a:-- so there is our pseudo-class--link. Now very important here for the syntax, there is no whitespace between these. So normally there is a lot of combinators where I've told you hey, spacing doesn't really matter; it does matter in this case. So we want to make sure that there is no whitespace there. Now what does this do? Well, link basically says hey, make sure you're targeting any actual links on the page, and by link it means that any link that has an href attribute. You'll note that the anchor link down here does not.

So if I save this and preview this in my browser again--I'm just going to refresh this-- you can see that now this anchor link down here is not getting that styling anymore, but these links that have the href attribute are still getting that styling. Let's take a look at some of the other pseudo-class selectors that we can use. So directly underneath that one, in this little add styles here area, I'm going to create another pseudo-class selector with a, so a:visited, and I'm just going to go ahead and change its color to black.

Now we're going to go ahead and style these and then I'm going to talk about these link pseudo-class selectors, because there are a couple of things that you need to know about them that are very important. Next, when I am done, I'm going to go to a and then hover, and we'll go ahead and give that one a background of orange. And then after that, we're going to do a:active, and for that one we're going to give it a background of green. So let's talk about these really quickly. So basically if you learn nothing more about pseudo-class selectors over the course of learning CSS, I guarantee that you'll at least learn these four: link, visited, hover, and active.

Obviously they refer to link states: link referring to any link with an href attribute; visited referring to any link that the user of the page has already visited; hover, any link that's being actively hovered over; and the active link is a link that is either in focus or is currently being clicked on. Now the order in which you write these is very important. As a matter of fact, some people have come up with a mnemonic device of love-hate, so LVHA for link, visited, hover, and active, and that's the order that you want those in if you're going to write them separately.

For example, if you put visited after hover then the visited styling will overwrite the hover styling. So you want to make sure they're in that order if you're going to use them. A lot of people group these together. They'll group the link and the visited styles together, and the hover and the active styles together if they want those to be the same. Now one thing about visited styles as well: browsers, over the last couple of years, realized that there was a little bit of a security leak with visited links, that browsers and sites could detect where a user has been and what the user has been doing through the visited link state, so they hide a lot of that now from the active user.

About the only thing that you can still do with visited link styling without getting into the browser's behavior itself is styling the color. That's about the only attribute that's left to us. So I'm going to go ahead and save this and go back into my browser and just refresh the page, or preview it, either way. And now I noticed that when I hover over the links I get that orange background color--that's for my hover styling. If I click on a link, you'll notice if I click and hold the mouse down, it just becomes green. Let's say I visit a page and I clicked on the Products page on purpose, because that one is actually in the folder. And now if I hit the Back button, notice that it's getting that visited styling so that black text is there because of the visited styling.

So, all of those are working. We get green when we're clicking on link, and then if we've visited the link, we get black, and we're getting orange for the hover. Now in a lot of menus you don't want to do this, where you're actually showing the visited styling. That's why a lot of people will go ahead and group the visited styling along with the link styling, so that nothing really changes. In some cases, it's okay to just leave it off. There really isn't a default visited style, except for browsers have a default visited color of purple. You've probably seen that where you've clicked on a link, gone back, and then underlined blue text changes to purple.

So a lot of people will group visited and link styles together just to prevent that purple from showing up. Okay, there's one more pseudo-class selector that I want to take a look at, and it's target. And it can be a little hard to demonstrate exactly how and why this works, so let's take a look at it. I'm going to go back into our code and just below the a:active, I'm going to create one more selector. I'm going to type in a:target, and for that styling, I'm just going to change the color to red. All right! Now I'm going to save this. And target is a very, very specific type of selector, so if I preview this again in the browser and refresh my page, you can see nothing happens.

I'm not getting that red styling, although I am getting a hover styling, which is nice, but that's really all I'm getting. Okay, so target has more to do with the URL than it does the actual page itself. You may have done this before where you've had an ability to click and jump further down the page, or maybe even click on an external link and take you to a certain section of the page. That's typically using the sort of anchor link. And in the URL, the URL has given a specific target or a specific focus. We do that in a URL query string by using the pound symbol.

So, after pseudo-class.htm in my address bar up here, if I type in #target, that's targeting any element on the page with an id of target. And if I hit Return, you can see that now the word target is now getting that red styling because it is now the target of the URL. And just so that you're not confused with that name, the ID could be anything. So if I come back in here and I change the ID to section1 and save that and if I go back to my browser and change this to section1, you'll notice that we still get the styling.

So it's really more about matching that ID value than the word target. I don't want you to get confused by that. Now over the course of writing your styles, you're going to use these pseudo-class selectors a lot-- maybe not the target one so much, but definitely the links. The links pseudo-class selectors alone will probably find themselves in almost every single style sheet you write. Now because of this, it's really important for you to become familiar with their syntax and the range of states and behaviors that you can target. They are also adding pseudo-class selectors to the specification all the time, especially with HTML5 adoption leads to more and more web and mobile applications being built within that sort of HTML, CSS, JavaScript, stack of technologies that everybody is using.

So be sure to read through the pseudo- class selectors section of the Selections Level 3 Specification and keep up to date with its changes and the changes that are being made to browser implementation.

Show transcript

This video is part of

Image for CSS: Core Concepts
CSS: Core Concepts

81 video lessons · 39987 viewers

James Williamson
Author

 
Expand all | Collapse all
  1. 4m 57s
    1. Welcome
      55s
    2. Using the exercise files
      4m 2s
  2. 1h 7m
    1. Exploring default styling
      4m 56s
    2. CSS authoring tools
      2m 29s
    3. CSS syntax
      4m 45s
    4. Writing a selector
      4m 10s
    5. Setting properties
      8m 40s
    6. Common units of measurement
      7m 47s
    7. Inline styles
      5m 1s
    8. Embedded styles
      5m 19s
    9. Using external style sheets
      10m 34s
    10. Checking for browser support
      8m 48s
    11. Dealing with browser inconsistencies
      5m 30s
  3. 2h 15m
    1. Structuring HTML correctly
      2m 51s
    2. Element selectors
      4m 52s
    3. Class selectors
      6m 4s
    4. ID selectors
      3m 27s
    5. Using classes and IDs
      10m 7s
    6. Element-specific selectors
      4m 35s
    7. The universal selector
      5m 42s
    8. Grouping selectors
      4m 49s
    9. Descendent selectors
      7m 32s
    10. Child selectors
      5m 7s
    11. Adjacent selectors
      5m 30s
    12. Attribute selectors
      12m 43s
    13. Pseudo-class selectors
      3m 54s
    14. Dynamic pseudo-class selectors
      8m 29s
    15. Structural pseudo-class selectors
      6m 45s
    16. Nth-child selectors
      13m 10s
    17. Pseudo-element selectors
      12m 40s
    18. Targeting page content: Lab
      8m 56s
    19. Targeting page content: Solution
      7m 59s
  4. 42m 39s
    1. What happens when styles conflict?
      4m 0s
    2. Understanding the cascade
      5m 47s
    3. Using inheritance
      6m 11s
    4. Selector specificity
      6m 55s
    5. The !important declaration
      4m 5s
    6. Reducing conflicts through planning
      3m 33s
    7. Resolving conflicts: Lab
      6m 45s
    8. Resolving conflicts: Solution
      5m 23s
  5. 1h 47m
    1. Setting a font family
      7m 10s
    2. Using @font-face
      9m 18s
    3. Setting font size
      7m 35s
    4. Font style and font weight
      6m 52s
    5. Transforming text
      3m 58s
    6. Using text variants
      2m 49s
    7. Text decoration options
      4m 26s
    8. Setting text color
      3m 2s
    9. Writing font shorthand notation
      8m 49s
    10. Controlling text alignment
      6m 33s
    11. Letter and word spacing
      9m 11s
    12. Indenting text
      4m 30s
    13. Adjusting paragraph line height
      10m 30s
    14. Controlling the space between elements
      6m 41s
    15. Basic text formatting: Lab
      8m 45s
    16. Basic text formatting: Solution
      7m 14s
  6. 2h 1m
    1. Understanding the box model
      16m 53s
    2. Controlling element spacing
      14m 29s
    3. Controlling interior spacing
      10m 49s
    4. Margin and padding shorthand notation
      6m 27s
    5. Adding borders
      8m 57s
    6. Defining element size
      10m 7s
    7. Creating rounded corners
      6m 58s
    8. Background properties
      2m 51s
    9. Using background images
      5m 10s
    10. Controlling image positioning
      10m 25s
    11. Using multiple backgrounds
      7m 5s
    12. Background shorthand notation
      5m 25s
    13. Styling container elements: Lab
      7m 55s
    14. Styling container elements: Solution
      8m 17s
  7. 47m 51s
    1. Color keyword definitions
      5m 4s
    2. Understanding hexadecimal notation
      6m 5s
    3. Using RGB values
      4m 58s
    4. Using HSL values
      5m 17s
    5. Working with opacity
      2m 23s
    6. Using RGBa and HSLa
      3m 8s
    7. Styling drop shadows
      5m 38s
    8. CSS gradients
      6m 32s
    9. Working with color: Lab
      4m 26s
    10. Working with color: Solution
      4m 20s
  8. 1m 58s
    1. Additional resources
      1m 58s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

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.


Mark all as unwatched Cancel

Congratulations

You have completed CSS: Core Concepts.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.