Different id elements followed by same class. Every element styled in a different way

HTML & CSS
1

Hi,

Is it a good thing to style in a different way different id-elements with one same class?

I use to code this way of proceeding in the following situation:
With that same class added through one javascript function, I go to denote the active link (or links) only if the link clicked is the same of the current url location.

In addition, it could be the case when I open a page, I go to highlight the link that contains that url opened, but also, I go to highlight the link in the breadcrumble trail, just using the same html class (and therefore one generic javascript function).

for example:


#element_link .current {
   background: red
}

#element_link_on_breadcrumble .current {
   background: green;
}

What do you think about it? Thanks!

2

If it only works with “JavaScript” enabled
then I do not think much of of it. :scream:

coothead

3 Likes
3

I’m with coothead, javascript doesn’t seem the right way to enable crucial styling.
I say crucial as I think you’re talking about navigation elements, and the orientation function will be lost without javascript.
(orientation : people use the active styling to know exactly where they are on the site).

I also like to stick to some standard classes for navigation lists
.is-active-trail & .is-active
.
.is-active-trail is put on every list item that leads to the active page link.
.is-active leads to the active link (the link of this page).

These two classes make every styling combination possible :sunglasses:

I would only use javascript to add these, if the links are page jumps (go to id’s in the page).

4

The actions that you are describing can be done with CSS alone, no JabbaScrap needed.

Personally, I avoid a promiscuous use of ID’s anyway. Styles associated with them can become too awkward to override.

Using the same classname to style different items differently could be confusing but it’s not unusual. Your demo depends on the entire selector to impart the color choice, so it’s not up to the classname. The classname just “activates” the color.

5

How can I “store” what page has been opened without using Javascript, (to see what is the url of the opened page), or without server side variable?

I usually do the following, using server side way, so I was searching for a more rapid method:

<?php
$self = $_SERVER['PHP_SELF'];

if ($_GET['current_link'] == 'link_1')  {
   $class_active_link_1 = " class='current'";
} elseif ($_GET['current_link'] == 'link_2')  {
   $class_active_link_2 = " class='current'";
}
?>

and in the html I have do insert the variable in all nav elements, very strenuous for large pages

<nav>
   <a href='<?= $self . "?current_link=link_1" ?>'<?= $class_active_link_1 ?>>Link 1</a>
   <a href='<?= $self . "?current_link=link_2" ?>'<?= $class_active_link_2 ?>>Link 2</a>
</nav>

my way of proceeding is similar like that using server side code.

6

I don’t know what the php does that you’ve written.

I probably failed to grasp the complex reasons why you are using JS to indicate the current page. With CSS alone, one can read a unique ID or classname in the body tag of a page and highlight the current page menu item of any page. Likewise, with HTML and/or CSS, one can make the current menu item non-clickable. That is what I was thinking as I read your first post. Sorry if I misunderstood.

7

Ron, are you referring to the :current pseudo selector?

Does that have good browser support?

8

No, I was thinking of the matching ID or class technique through which the unique class or id in the page header matches a line of CSS that styles the menu item for that page as the “current” page.

<head id="homepage">

<nav>
     <li class="homepage">HomePage</li>
     <li class="outpage">HomePage</li>
     <li class="vacationpage">HomePage</li>
</nav>

CSS:

#homepage .homepage,
#outpage .outpage,
#vacationpage .vacationpage {
    current
    page
    styles
    pointer-events:none;
}

Whichever page is the “current” page gets the overriding styles.

2 Likes
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.