How do I apply a CSS ID selector to a webpart page?

Question

I am using a CEWP-linked HTML file to generate a menu of links to other web-part pages. I want to use this same file in a CEWP on each of the linked pages. As an indicator of the user's location, I want to style the current page's link differently from the other links in the menu.

My understanding is, I can create a CSS rule defining a style for the current page's link by using a parent-descendant selector, i.e., if the page's id="Home" and the link's class="Home", then #Home .Home{font-weight:bold;} should get me what I need.

I'm thinking I must be able to assign an ID to a parent element on the web-part page so all the content therein is a "child" of the element and can be so addressed in a declaration. I'm wondering to which element on the ASPX page I should apply an ID. Alternatively, Would my ASPX page already have an ID I can address for styling?

I realize I might be coming at this issue from an unconventional direction, and I'm open to other methods. In addition, I am in a position of making an inconsistently locked-down installation of Foundation do what I want, but if I learn there is a "best practice" path to my goal, I can request the team in white coats implement a solution.

Answer 1

This is more of a general HTML/CSS question (except for the fact that you are using CEWP), however, while you are still here why don't you Export the CEWP and simply use a selector (e.g. id="current") and define that with the style for the active one, while changing which of the elements have the #current added on each page.

On the other hand the top navigation bar of SharePoint (based on ASP.NET Menu control) does this already.

Answer 2

I would recommend to avoid using id for just css styling, especially such a general word as #current. Use a class instead: .current-page or something like that.

SharePoint renders classes and id for a current menu item in the server side. In your CEWP you don't have access to server side. One possible solution is to use an attribute selector with jQuery. Suppose you have a wrap div in your menu with class .my-cewp-menu.

$('.my-cewp-menu').find("a[href='currenHref']").addClass("current-page");

This has to be run when DOM is loaded. You can get the current page url (href) through javascript.

(function($) {
    $(document).on({
        ready: function() {
            var href = window.location.href;
            $('.my-cewp-menu').find("a[href='" + href + "']").addClass("current-page")
        }
    });
})(jQuery);

This code is just a simple example. It doesn't take possible window.location.hash (# in url) or possible relative urls (/subsite/my-page.aspx, or some-page.aspx) into account.