While learning about dynamic psuedo-class selectors, I saw mentioned the ability to use anchor tags to go to specific parts of the page. They are called anchor tags, but I am very confused about something.
If I am using psuedo class style selectors to change the target ID to red here:
There is no real difference - none as far as the browser actions are concerned. Both are viable and work - although I would stick with the CSS version. It’s cleaner and you don’t have to go scurrying around HTML to change it.
Your question isn’t very clear to me, at least. What are you trying to do? IDs can be used on elements and referenced with fragment identifies in links so that you can jump right to them … but the :target attribute is for styling an element that is targeted. Different things.
I hate to admit how puzzled I was when I read the post. Didn’t understand it, either.
As Ralph said, the :target pseudoclass does not belong in the group of pseudoclasses for styling anchors.
The group for styling anchor coloring, etc, could include (in this order):
a:link {}
a:visited {}
a:focus {}
a:hover {}
a:active {}
And you already know how to jump to an on-page location using a fragment identifier, either by adding an <a name=“targetid”></a> anchor tag (which is an old technique), or by simply adding an ID to the desired target tag, such as a div <div id="targetid> or an image <img id=“targetid”>. It’s set up in HTML, nothing to do in CSS.
Using the :target pseudoclass to style specific items is different and is about acting on something that is clicked and has nothing to do with anchors linking to anything. New styles are applied in CSS to a :target-ed object.
YES! This brings so much clarity. SO glad it’s “clicking”. I was confused because I felt like they were both doing the same thing!
I think I’ve confused myself because I’ve always wanted to make a site with a menu that connects only anchor tags for a site that has all its content on a single page. Hence, so when you click the menu buttons, it takes you to the same page, just under a different heading. It’s idea I have for sites that have a lot of text (i.e. wikipedia).
Yep, and that’s a perfectly valid use case. So in that case, give each heading a unique ID, and then use that ID as the href in the menu links. So, for example, if one of your headings is “Products”, its HTML would look somethig like this:
<h2 id="prod">Products</h2>
The link in the menu would look something like this:
<li><a href="#prod">Products</a></li>
Clicking that link will jump you to the Products section.
Now, if you wanted some kind of special effect when you just to the Products heading, you could use the :target selector. For example, let’s say you want the Products heading suddenly to have a yellow background when you jump to it like that. You’d do this:
#prod:target {background: yellow;}
That way, the Products heading will have a yellow background when you jump to it from the menu, and it will keep that background until you click another menu link and jump to another heading.
I hate to admit how puzzled I was when I read the post. Didn’t understand it, either. 
