Simulating conditions with pure HTML/CSS

by on

There are many ways to assign extra styles to the menu item of the active page. TYPO3 for example provides ACT in Typoscript to do so. But did you know that this can be solved with pure HTML/CSS?

The only information we need to have is the ID of the page and the menu items. By setting a page ID in the <body> tag and the class in the menu list item, we can use the cascading property to define extra style if both are matching.


<body id="papers">
<ul id="navMenu">
  <li class="blog">My blog</li>
  <li class="papers">My papers</li>
  <li class="books>My books</li>
  <li class="contact">Contact</li>


#blog #navMenu .blog a,
#papers #navMenu .papers a,
#books #navMenu .books a,
#contact #navMenu .contact a, {
  color: red;