CSS experts, have a newbie question

Factual Questions
1

Being a backend developer, I have avoided having to deal with CSS much. There is an aspect to it, that has bothered me, so perhaps CSS experts here can explain a concept for me and put me on the right track.

In this example, you have a website and there are hyper links on various pages, but the default for this is for the text-decoration to be “none”. But you want to be able to have one link have an underline and a different color. While leaving all the other links to behave as they have.

I put together the following CSS:

Keep in mind, the above would be added to a Joomla custom.css file, which is where you put your own CSS in addition to the CSS which is provided for the template.

Of course, the above would simply overwrite how all the links behave on the website, which is not what we want to do.

How do I combine all of the above CSS so that it would only be used for the specific link which would be a

?

I have seen numerous examples online, but they use an ID or CLASS but with just one single thing in it such as handling the underline or the color. How do you combine the above and just reference it all by itself for this one special link?

As a software developer, I’d expect CSS to function like this, but I don’t recall seeing this kind of syntax:

2

If you put an id in there, so it says



<a id="myspeciallink" href="foo">foobaz</a>

then can’t you just do your CSS as:



#myspeciallink:link, #myspeciallink:visited {
  color: #da0026;
  text-decoration: none;
}

#myspeciallink:hover, #myspeciallink:active {
  text-decoration: underline;
}

Or have I misunderstood what you want?

3

That would be my solution as well.

4

The latter is how I’ve done it on a number of WordPress, MediaWiki and HTML5 pages.

With very little code, you can have a row of links all highlight in different colors, or the like. It’s a fun technique.

5

Thanks for the reply.

I think I’m understanding the syntax now. In your CSS example, #myspeciallink functions like an array? An array which would contain link,visited,cover and active. So each time #myspeciallink is used in the CSS, it is appending the other attributes?

And the reason you define #myspeciallink:hover instead of something like #myspeciallink:a:hover is because the “a” is already being established in the HTML of “<a” ?

So there are no constructs in CSS to include the whole chunk of CSS code to be assigned to #myspeciallink at once, it needs to be built as you’ve shown in this example. As a software developer, I would have thought you could simply assigned a chunk of CSS code to #myspeciallink. But I see this helps define the various parts of the ID selector to use? Like if you wanted to just use the visited, you’d have it as

in HTML?

6

My solution would be to NOT DO such silly things. (My solution as a visitor would be to click zway from this page, and go to a competitor whose webpage follows the normal web standards.)

Non Standard Link Colors was listed as item #8 on the Top 10 Mistakes in Web Design in 1996, over 20 years ago. And it’s still valid today.

People expect links to be underlined, to be a different color than regular text (usually blue), and to change color once they are visited. If your site doesn’t do this, it will at a minimum annoy visitors, and drive a certain percentage of them to go elsewhere. Why would you want to do that?

7

#myspeciallink is simply the unique ID of the link in question. (an ID can be attributed to just about any tag for the record.)

CSS is basically comprised of inherent elements (things like body, a, etc that already exist), classes (identifiers that *aren’t *unique and are usually used on multiple items) and ID’s, which are intended to be used to represent individual elements on a page.

As you suspected, in the example provided, #myspeciallink:hover works without the a because the ID #myspeciallink is defined IN the anchor tag itself.

If you had something like:


<div id="#myspeciallink"><a href="http://whatever.com">whatever</a></div>

Then #myspeciallink:a:hover would be a more appropriate reference, because the anchor is inside the div with that ID (again, it doesn’t have to be a div in this case, it’s about the hierarchy.)

I don’t think I’d compare visited, active, etc to an array, those particular pseudo-elements can’t really be used in any array type fashion.

I’m not sure what you mean by this exactly, in your example you basically have an idle and a rollover state (one underlined, one not) - you can define all you’d like under the #myspeciallink CSS, but without an alternative state defined (i.e. hover, active) - nothing will change when the user mouses over.

I could be wrong, but I think there may be some misunderstanding about the #myspeciallink:visited here - while you’d use that in your CSS markup, that isn’t to be defined on the ‘page’ as in your example of:


id="#myspeciallink visited"

It’s just default CSS meaning the user has visited the page before (it’s in their history.)

In fact, while you can stipulate multiple *classes *that way, since an ID is supposed to reference a *particular *element, this would be a faux-pas. While most browsers are pretty forgiving about it for basic CSS markup, it breaks more advanced stuff break pretty quick (if you wanted to reference it by ID in a script, would it be “myspeciallink” or “visited”?)

Anyway, so:

  • You can’t ‘use’ visited exactly, because that just means the link referenced is in the users history. It either has been or hasn’t.
  • You COULD use two classes kind of like you referenced if you wanted to, but not IDs (at least you shouldn’t.) i.e.

class="myspeciallink myspeciallinktwo"
  • Oh and the hash tag just stipulates an ID in the CSS definition, don’t put it in the actual tag (a id=“myspeciallink” **not **a id="#myspeciallink")
8

You can apply CSS to an element (every A element), to an ID (everything with the ID of whatever) or to a class (everything you assign to have that class).

As a programmer you know you really want everything to have unique IDs, so you can call to it in Javascript, etc, so when you want to apply a style to more than one element, but not every instance of that element, you want to apply it using a CLASS.



.classname:link, .classname:visited {}
.classname:active{}

<a href="url.html" class="classname">foo</a>

Anyway, **thumbz **is right. Don’t use an ID, use a class. Add that class name to every item you wish to carry the style you’ve created for that class.

9

The OP didn’t ask us to judge his design, he asked us how to make it appear as he wants.

10

Using your code example. Would this be correct and complete?



.classname:link, .classname:visited {color: #da0026; text-decoration: none;}
.classname:hover, .classname:active {text-decoration: underline;}

<a href="url.html" class="classname">foo</a>

So how the above works is that .classname for link and visited gets assigned the color #da2006 and sets the text-decoration to none. Then on the second line, .classname gets added to it hover and active which both will have a text-decoration set to underline?

11

Thanks. My post is more about me understanding the constructs of CSS than just one specific thing I need to get working. I am familiar with ID because I’ve used them in JavaScript programming. But just for HTML, it isn’t clear to me why some things are ID and other things are a CLASS. What is the significant difference? Will somethings simply not work if they are incorrectly defined in the CSS as an ID or CLASS?

12

Your filled in example from zippers post should work fine.

From an CSS standpoint there’s not a lot of practical difference, you can mark either one up just the same whether it’s a class or ID (other than the # vs . prefix when writing the css, and the ID vs class= when calling it.)

IDs allow a particular element to be referenced is more or all it comes down to, whether it’s JS or another programming language, screen readers, additional CSS references, etc. They also replaced the old “name” anchor tags that we used to use to reference a spot on the page for links like mypage.html#myid

13

Thanks.

So it sounds like my default should be CLASS and leave ID for things like JavaScript programming. I will have to look through some template.css used in Joomla and see if they are using IDs because it’s for JavaScript.

Here is CSS I got from a working template for Joomla:

I see the .navbar .navbar-inner{ appears twice in this CSS code fragment. Is the second occurrence adding the display:table; and padding:3rem to .navbar and .navbar-inner or is this overriding the first one?

14

I’d still recommend using IDs for things like primary layout structure, but for most content markup, yes, go for classes.

A secondary declaration of the same class will only overwrite any css markup that’s been redefined, it won’t clear out the old. So in that example display table would be added to the class as it wasn’t defined the first time around, while the padding would be overwritten to 3, making the first padding declaration pointless (though no harm done other than a couple extra bytes)

15

As an element of programmer style I’d argue that ID is intended to be *unique *on a page. Whereas class is intended to be just that, an attribute that defines a particular html element as being a member of a *group *of elements which all share some logical connection with each other for styling purposes.

By grouping the elements you make it easy to define css that applies to all the elements without needing to fish out each and every individual ID. This becomes extra important when your page is dynamically generated or edited by scripting. It’s hard to impossible to script-edit css on the fly. But it’s easy to script-edit the HTML and have the stationary css definitions be applied dynamically to the changing HTML by the browser’s rendering engine.

Note you can also use javascript to refer to elements by class. Essentially you retrieve a collection (not array) of elements containing that class as one of their attributes.

My bottom line: Do NOT think “ID=javascript, class=css”. Instead think “ID=individual items, class=group of similar items”.

16

While there’s a certain amount of truth in what you say, you’re also limiting things to the white page, black text, blue underlined links “personal” pages of college staff ca. 2000.

Being weird for the sake of being weird is one thing. Using a tasteful, recognizable and self-teaching style for links that isn’t blue underlines is another. Changing color on visited links is trés vieux chapeau in nearly all cases.

17

Each element can have zero or many classes and each class can be applied to many elements. An element can have exactly 0 or 1 ID and that ID must be unique to the page. From a CSS point of view they’re both used as ways to select certain elements to apply CSS properties to. I agree that a back end developer can default to classes, as long as they remember in the back of their head about the uniqueness of IDs.

18

Front end developers use CSS preprocessors like Sass and Less to get closer to what you’re envisioning. But that kind of code just gets transpiled either by Ruby or JavaScript inside Node and churned out as the same CSS you’re seeing elsewhere. It’s incredibly useful for developers but it never makes it to the browser.

19

It’s what LSLGuy said (unique vs multiple on the page)… but I’ll add that this is more important for fellow coders/maintainers than browsers, which are generally pretty forgiving about uniqueness errors (like multiple things sharing the same ID can still all get styled). However, different browsers may be forgiving in different ways, so it’s still best not to do that anyway.

For humans, however, it’s a really helpful hint to know “Oh, this blue thing I need to make orange now is a class called .productLinks… I should check the other instances of it” vs “#primaryNavBar? That’s probably just this one top bar”. It gives humans a more obvious sense of importance and uniqueness when they’re looking at your CSS.

In practice, however, people routinely fuck up IDs and classes all the time and it’s not that huge a deal… HTML basically evolved to be extremely tolerant of human errors vs other languages, which also makes it hard to debug when things that would’ve caused a fatal halt or warning in other languages instead just go on to display just fine without any visible notices.

All that aside… aside from IDs, classes, and elements, there are also very useful pseudo-elements and attribute selectors in CSS3 (that most browsers support now):

They allow you to say things like “make every other row of the table have a gray background” or “mark external links with a special icon” or “change the bottom margin of the last entry in a bullet list”.

And if you don’t like the random idiosyncrasies of CSS and are willing to use XHTML (a stricter subset of HTML that enforces XML-like end tags), you can also look at the much more powerful, more dogmatic, and thus more predictable XSLT. It’s more general-purpose than just web page styling, but can be used for that purpose with or without CSS. Among other things, it adds conditional display logic and data templates to HTML (almost like Angular does using JavaScript).

TLDR HTML is a terribly messy language that has evolved multiple lineages of hacks over the decades and CSS is only gradually getting cleaner. Its community/corporate-propelled development fast outpaced what the standards organizations were able to keep up with, so we get a ton of powerful features poorly organized in different spheres.

20 

a[href="foo"] { color: #da0026; }

Is valid CSS on all modern browsers, but it would be an unusual practice and giving your link a class would be more appropriate. Aside from being confusing due to being unusual, it would break if you ever updated your link to <a href=“bar”></a>