What is the best way to utilize pseudo elements in order to alter the styling of a particular class?

Here is the current navbar I have

I want to achieve a scenario where clicking on any of the navbar elements triggers a specific action

Below is the HTML code for the navbar:

    <div class="navbar-container">
        <div class="navbar-wrapper">
            <div class="text-radius home-radius">
                <p><a href="#" class="nav-anchor">Home</a></p>
            </div>
            <div class="text-radius profile-radius">
                <p><a href="#profile" class="nav-anchor">Profile</a></p>
            </div>
            <div class="text-radius contact-radius">
                <p><a href="#contact" class="nav-anchor">Contact</a></p>
            </div>
        </div>
    </div>

The CSS styling for the navbar is as follows:

.navbar-container {
    display: flex;
    justify-content: center;
    
}

.navbar-wrapper {
    font-size: 13px;
    margin: 20px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-radius: 5em;
    background-color: var(--lightgrey);
    width: 18.8em;
    height: 3em;
    
}

.nav-anchor {
    text-decoration: none;
    color: var(--black);
    
}

.text-radius {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5.8em;
    height: 2.5em;
    border-radius: 5em;
}

.home-radius:active {
    background-color: var(--white);
}

.profile-radius:active {
    background-color: var(--white);
}

.contact-radius:active {
    background-color: var(--white);
}

My attempts so far include using :active, :focus & :target pseudo-classes, but they haven't been successful. I'm currently stuck and seeking solutions without resorting to JavaScript.

htmlcss

Answer №1

Update:

If you want to maintain focus when clicking elsewhere, consider using a hidden checkbox as a solution. To streamline your focus on one item, you can switch to circular boxes.

.navbar-container {
    display: flex;
    justify-content: center;
    
}

.navbar-wrapper {
    font-size: 13px;
    margin: 20px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-radius: 5em;
    background-color: lightgrey;
    width: 18.8em;
    height: 3em;
    
}

.nav-anchor {
    text-decoration: none;
    color: black;
    cursor: pointer;
    
}

.text-radius {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5.8em;
    height: 2.5em;
    border-radius: 5em;
}

.home-radius:focus-within{
    background-color: white;
}

.profile-radius:focus-within{
    background-color: white;
}

.contact-radius:focus-within{
    background-color: white;
}

.navbar-wrapper input[type=radio]{
    display: none;
}

.navbar-wrapper input[type=radio]:checked + .text-radius{
    background-color: white;
}
<div class="navbar-container">
    <div class="navbar-wrapper">
        <input type="radio" name="rGroup" value="1" id="r1" checked="checked">
        <label class="text-radius contact-radius nav-anchor" for="r1" onclick='window.location.assign("#")'> Home </label>
        <input type="radio" name="rGroup" value="2" id="r2">
        <label class="text-radius contact-radius nav-anchor" for="r2" onclick='window.location.assign("#Profile")'>Profile</label>
        <input type="radio" name="rGroup" value="3" id="r3">
        <label class="text-radius contact-radius nav-anchor" for="r3" onclick='window.location.assign("#Contact")'>Contact</label>
    </div>
</div>

To enable focus on a div, include the tabindex attribute and utilize the focus selector. Remember that in your structure, clicking on an a element does not automatically focus on the div; therefore, employing the focus-within selector is essential:

.navbar-container {
    display: flex;
    justify-content: center;
    
}

.navbar-wrapper {
    font-size: 13px;
    margin: 20px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-radius: 5em;
    background-color: lightgrey;
    width: 18.8em;
    height: 3em;
    
}

.nav-anchor {
    text-decoration: none;
    color: black;
    
}

.text-radius {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5.8em;
    height: 2.5em;
    border-radius: 5em;
}

.home-radius:focus-within{
    background-color: white;
}

.profile-radius:focus-within{
    background-color: white;
}

.contact-radius:focus-within{
    background-color: white;
}
<div class="navbar-container">
    <div class="navbar-wrapper">
        <div class="text-radius home-radius" tabindex="0">
            <p><a href="#" class="nav-anchor">Home</a></p>
        </div>
        <div class="text-radius profile-radius" tabindex="1">
            <p><a href="#profile" class="nav-anchor">Profile</a></p>
        </div>
        <div class="text-radius contact-radius" tabindex="2">
            <p><a href="#contact" class="nav-anchor">Contact</a></p>
        </div>
    </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issues with checkboxes in HTML 5 showing inconsistent behavior

Utilizing: APS.NET MVC 4.0 Incorporating javascript/jquery to manage check boxes within a table, I have encountered an issue where the code functions correctly during the first and second passes. Initially, it checks all the checkboxes, while on the secon ...

jqueryasp.net-mvchtmlcheckbox

Tips for adjusting the font color of user-provided text within an input box using HTML and CSS

HTML code:- <p><input type="text" placeholder="Enter your username"></p> CSS code:- .main-header input { width: 90%; padding: 1rem; margin: 20px 0px; border: none; border-bottom: 4px solid #5f5fb0; ...

htmlcssinputcolors

Creating an HTML dynamic table with fixed height to prevent expanding when adding text

I have a dynamic table with fixed width and height. By using a random function, I determine the number of cells (ranging from 3x3 to 7x7) in the table. The table renders correctly, but when clicking on a cell to write a letter, the row expands in height. H ...

htmlcss

Difficulty with collapsing icon in Bootstrap's navigation bar

I am in the process of building a bootstrap website and facing an issue with the collapsible navigation bar. The nav toggle button is always visible, but I want it to only appear when the nav bar goes to a medium size. How can I achieve this? The code sni ...

htmlcsstwitter-bootstrapbootstrap-4

Tips for sending two values to a PHP file using JavaScript Ajax

I have created a code for two dropdown menus. The goal is to select values from both menus and send them to a php file using the GET method. The values should be sent to the php file only when both menus have selections made. Below is the code snippet: ...

javascriptphpjqueryhtmlajax

establishing irregular edges for the div container

Looking to create a class that can transform an element into a specific shape using CSS. Not entirely sure if this is achievable with pure CSS alone, but applying a class to the image element will morph it into the desired shape as shown below. <style ...

htmlcss

"Making changes to the HTML data attribute as desired, however, the updates are not reflecting on

I have some HTML that includes an input field like this: <input type="text" id="query" data-source="whatever"> Recently, I wrote some jQuery code to modify the value of the data attribute from "whatever" to "test". Here is the snippet: $(function( ...

jqueryhtml

Creating aesthetically pleasing and uniform rows of responsive Bootstrap 4 cards with consistent heights

I'm a beginner in the world of design and Bootstrap, so please be patient with me. My goal is to create a series of cards that have equal height and width (responsive, not fixed) in each row. In other words, I want all the cards to be as tall and wid ...

cssbootstrap-4

Is using transform scale in CSS to scale SVG sprites a valid method of scaling?

I have been using an SVG sprite as a CSS background image in this manner: .icon-arrow-down-dims { background: url("../sprite/css-svg-sprite.svg") no-repeat; background-position: 16.666666666666668% 0; width: 32px; height: 32px; display: inline-b ...

htmlcsssvg

Customize the font size in Bootstrap 5 using REM units

When it comes to setting font sizes for easier calculations in REM values, I currently use this approach: html { font-size: 62.5%; } body { font-size: 1.6rem; } /* 16px */ However, Bootstrap 5 uses the root value (which is typically set at 62.5%) to calc ...

csssassbootstrap-5

Electron fails to display images in the compiled version

I'm currently troubleshooting an issue related to displaying images using CSS in my electron project. In the latest version of the application, the images are not showing up when linked from a CSS file. However, in a previous version, the images disp ...

javascripthtmlcsselectron

Is there a way to determine what is affecting the properties of an element?

I've been grappling with a chunk of lengthy HTML, styles, and javascript. My mission? To uncover whatever magic is changing the text within a specific element. <span class="panel-title"> I'm a Panel with All Options</span> Transform ...

javascripthtmldebuggingbrowser

When applying a cell formatter to change the color of a Tabulator cell, the text displayed is being

I am attempting to dynamically change the color of a tabulator cell based on its input. My initial approach was to simply try changing the cell's color. After running the following code, here is what I observed: function testFormatter(cell, formatt ...

javascriptcssdomtabulator

Enhancing the mouse pointer in a JAVA application

Currently, I am immersed in a school project and trying to capture the attention of children by implementing a unique feature - a special mouse pointer. Imagine a pointer that moves, causing a small bird to follow its every movement. My project is based ...

javascriptcssmouseeventmouse

Variability of pixel dimensions on various devices

When it comes to front-end design in CSS, the use of pixels as a measurement is quite common. However, with varying display sizes and resolutions, one might wonder how relevant this fixed pixel size really is. Is there a way to utilize real-world measure ...

cssresponsive-design

Creating a wavy or zigzag border for the <nav id="top"> element in OpenCart version 2.3

I'm trying to achieve a wavy/zigzag border on the <nav id="top"> section in opencart v2.3 instead of a flat border. something similar to this example Below is the CSS code I am currently using: #top { background-color: #EEEEEE; borde ...

htmlcssopencartopencart2.3

When attempting to render HTML containing multiple CSS classes within a JSON request parameter, the styles are not being applied as expected

In my API, I'm dealing with a JSON request parameter that includes an HTML string. This HTML string references CSS styles from a separate .css file. However, when an HTML element has two CSS classes assigned to it, neither of the classes' styles ...

ioscssjsonswifthtml-email

CSS - Creating a stylish break line for link boxes

Struggling with creating a box that includes linked text and a line break. However, the issue arises when the line breaks, causing the box to also break. After trying multiple options, I still can't seem to find a solution. Check out my attempt her ...

htmlcssline-breaks

Injecting a parameter at the end of a web address - HTML

I need to append a value to the end of an existing URL. For instance, if a user enters "hello world" into an input field, clicks submit, and should be directed to: http://google.com/?q=hello%20world Is it possible to accomplish this using only HTML or d ...

phphtmlformsurl

Facing an infinite loop issue with my ng-view and the index.html page in AngularJS

Hello everyone, I have a question regarding AngularJS ngview. I just started learning about Angular a week ago. In my code, the webpage is showing an infinite loop of the index itself instead of displaying the correct page. I've searched on Stack Ove ...

javascripthtmlangularjs