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

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.

Answer 2

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 3

Please know that I have selected Anatoly's answer, and only provided as an alternate method in the event such is needed...

My implementation of SP uses <asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server"></asp:Content> on Webpart pages to surround the <table> containing the <WebPartPages:WebPartZone/> tags. I can target the content of everything placed in webparts on a Webpart page (like my menu code) by adding classes and/or IDs to this table tag:

<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
 <table class="Class1 Class2" id="Home">
  <tr><td><WebPartPages:WebPartZone/></td></tr>
 </table>
</asp:Content>

The elements in the CEWP containing my menu code are children of the ASPX page's <table ID="Home"> element. By assigning classes to each menu link corresponding to their target page, I can style them as the "current" link based on the current ASPX page's <table> ID.

An example of the selector & declaration, and rendered source code:

From the stylesheet linked in the ASPX page...

#Home .Home{font-style:italic;}

From the table on the ASPX page...

<table id="Home">

<!--CEWP's HTML-->
    <ul>
     <li>
      <a href="http://website.com" class="Home">Home</a>
     </li>
    </ul>
<!--End CEWP-->

</table>