Is there a way to display a specific item in the breadcrumbs with a unique color that contrasts with the other items?

I have created a breadcrumb using CSS and HTML, but I want to add a unique style to one of the items in the list without using hover effects. I attempted to apply a different class with a background color but it didn't work as expected.

Does anyone have a solution for this?

Thank you!

body{
font-family:Arial, Helvetica, sans-serif;

}
    #crumbs ul li a {
display: block;
float: left;
height: 15px;
background: #999;
text-align: center;
padding: 20px 30px 0 20px;
position: relative;
margin: 0 10px 0 0; 
font-size: 18px;
text-decoration: none;
color: #fff;
    line-height: 1px;
cursor:default;
}

    #crumbs ul li a:after {
content: "";  
position: absolute; right: -17px; top: 0;
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-left: 17px solid #999; 
    z-index: 1;
}
    #crumbs ul li a:before {
content: "";  
border-top: 17px solid transparent;
border-bottom: 17px solid transparent;
border-left: 17px solid #fff;
position: absolute; left: 0; top: 0;
}
    
    #crumbs ul li {
    display:inline;
}

/* To add a unique color to a specific item */
#unique-item {
background-color: red;
} 

        
    #crumbs ul li a:hover {
background: #779519;
}
#crumbs ul li a:hover:after {
border-left-color: #779519;
}    
 
... (additional code)

</div>

cssbreadcrumbs

Answer №1

I made a simple adjustment by replacing the :hover part with color, which allows you to assign class="color" to one of the <li>'s.

body {
  font-family: Arial, Helvetica, sans-serif;
}
#crumbs ul li a {
  display: block;
  float: left;
  height: 15px;
  background: #999;
  text-align: center;
  padding: 20px 30px 0 20px;
  position: relative;
  margin: 0 10px 0 0;
  font-size: 18px;
  text-decoration: none;
  color: #fff;
  line-height: 1px;
  cursor: default;
}
#crumbs ul li a:after {
  content: "";
  position: absolute;
  right: -17px;
  top: 0;
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 17px solid #999;
  z-index: 1;
}
#crumbs ul li a:before {
  content: "";
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 17px solid #fff;
  position: absolute;
  left: 0;
  top: 0;
}
#crumbs ul li {
  display: inline;
}
#crumbs ul li a.color {
  background: #779519;
}
#crumbs ul li a.color:after {
  border-left-color: #779519;
}
#crumbs ul li:first-child a {
  border-top-left: 10px;
  border-bottom-left: 10px;
}
#crumbs ul li:first-child a:before {
  display: none;
}
#crumbs ul li:last-child a {
  padding-right: 80px;
  border-top-right: 10px;
  border-bottom-right: 10px;
}
#crumbs ul li:last-child a:after {
  display: none;
}
<div id="crumbs">
  <ul>
    <li><a href="#">Ticket Type / Zone</a>
    </li>
    <li><a href="#" class="color">Sector</a>
    </li>
    <li><a href="#">Seat</a>
    </li>
  </ul>
</div>

Answer №2

If you want to change the color of your element, one easy method is to assign a class to it.

You can achieve this using CSS:

#crumbs ul li a.NewColor { color: #whatever; }

Then, simply apply the new class name in your HTML:

<li><a href="#" class="NewColor">Section</a></li>

Sorry for repeating what was already mentioned earlier!

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

Adjust the Placement of Images in Relation to Mouse Movements

Is there a way to creatively animate the positions of images or background images based on mouse movement? Let's take Github, for instance: https://github.com/thispagedoesntexist The 404 page on Github is truly impressive. I aim to captivate my use ...

javascriptcsscss-transitions

Troubleshooting problems with forms using Bootstrap and HTML

I could use some assistance with a problem I'm facing while trying to acquire new skills through learning. I would like my picture and forms to resemble the one in this image: enter image description here index.html <div class="jumbotron"> &l ...

htmlcsstwitter-bootstrap

Tips for correctly positioning CSS elements:

I am currently working on a slider using noUi Slider and aiming for an elegant solution. To accommodate the large size of the handle, I expanded the base UI with extra values which are not allowed, causing the handle to jump back to the permitted values. T ...

jqueryhtmlcsscss-positionz-index

The code functions properly in Chrome's Developer Tools, but fails to display correctly on an actual handheld

Contact form in Developer Tools Contact form on Chrome for Mobile Upon examining the images, it becomes apparent that the CSS is not rendering correctly on the mobile device. Media queries are being utilized for styling on mobile platforms. <meta nam ...

htmlcssgoogle-chromemobilemedia-queries

The shading of the box isn't displaying the correct color in Microsoft Edge and IE 11

I have a unique pattern consisting mainly of white and grey hues. To add a touch of color, I am using the box shadow property in CSS to apply a blue filter effect. This technique successfully displays the desired result in Firefox and Chrome browsers. Howe ...

cssinternet-explorermicrosoft-edge

No visible changes resulting from the CSS file

My project includes a CSS file named default.css, but it doesn't seem to be working or making any changes to my page This is the content of default.css: .feedbackText{ display: none; text-align: center; margin-left: 50px; color: blue; } In the HTML ...

csshtmlbootstrap-4

What is the best way to target CSS only to elements that do not have a parent with a specific class?

Striving to preserve the existing CSS in the codebase. .my-new-class { .existing-class { ...implementing new styles } } .existing-class { ...maintaining old styles } I attempted a technique that I know won't work and understand why: ...

csssassancestor

Link is causing CSS style to malfunction

I am facing an issue with the styling of my JSP page. When I link the external style sheet using this code: <link rel="stylesheet" type="text/css" href="/doctor/css/form_input.css" /> it seems to have no effect on the appearance of my page. However ...

htmlcssjsp

Top method for displaying radio buttons as switchable buttons within a web form

I want to customize the appearance of my radio buttons on a form to make them look like toggle-able HTML buttons, similar to the examples shown in these Bootstrap examples. By using Flask, Bootstrap, and jinja2, I've successfully converted my radio bu ...

javascripthtmlcssbootstrap-4

Modify the color of the text for the initial letter appearing in the sentence

I am currently exploring the possibility of altering the font color of the initial instance of a letter in a div. For example, if the String were 'The text' and I desired to make the color of 'e' yellow, then only the first e would be i ...

htmlcssangularjs

What causes the div to shift while performing the FadeIn-FadeOut effect?

It seems like there might be something that I'm overlooking, as I am encountering a minor issue with this. I am aiming to align the "submenu div" on the right side of the Show/hide links. Initially, when I load the div, it is correctly positioned. H ...

javascriptjqueryhtmlcss

Obtaining data from console.log and showcasing it within a div element

Currently, I am facing a challenge where I want to retrieve the title, plot, and poster using the themoviedb API. However, I am lost on how to begin coding this. Whenever I perform a search, the information is displayed in the console log of the browser. ...

cssjsonhtmleach

Enhance your HTML audio player with added timeline functionality

I'm currently working on incorporating an HTML audio player into my project. I've managed to get the play/pause functionality to work, but now I'm stuck on adding a timeline feature. Additionally, I'm not sure how to implement the play/ ...

javascriptjquerycsshtmlaudio

Setting up Angular Toolkit via npm installation

After successfully installing the UIKit npm package within an Angular 2 CLI project, what steps should I take to utilize it? I have also installed typings for UIKit (@types/uikit), but I am unsure of how to properly import the package into a controller i ...

cssangulartypescriptnpmuikit

I attempted to utilize the <map> tag in creating a circular image that functions as a hyperlink, but unfortunately, it is not functioning correctly

I've been trying to create a round button using the code below, but something seems to be wrong with it. The issue I'm facing is that the area around the image is also clickable, even though I have used border-radius. Can someone please take a lo ...

htmlcssimagemap

Incorporating orientation settings within a media query using MUI

In my current project, I am utilizing MUI in conjunction with React. To specifically style the iPad resolution using MUI breakpoints, I have implemented the following code snippet: contentBox:{ width:"10%", paddingLeft:"10p ...

cssreactjsresponsive-designmaterial-uimedia-queries

How can I save a value in JavaScript once the page has finished loading?

$("#divid1").click(function(){ $("#divid1").hide(); //this should remain hidden even after refreshing the page $("#hideid1").hide(); //this should remain hidden even after refreshing the page $("#id1").show(); //this should remain visible even ...

javascriptjqueryhtmlcsscookies

Here's a solution to prevent the "jump" effect when hiding elements in a navbar

Currently, I am facing an issue with my h5 elements within the navbar when scrolling. I am using Bootstrap 4 and jQuery for this project. The problem arises in my navbar where there are four sets containing an icon, followed by an "h5" and then a "p" elem ...

jquerycssbootstrap-4hideelement

Creating equal height nested columns in Bootstrap 3 Grid: ensuring all nested columns are uniform in height

Struggling to make sure all columns in Bootstrap 3 are the same height throughout the page? If you've managed to achieve this with 3 columns, like the example provided here, great job! However, the challenge arises when dealing with nested columns t ...

jqueryhtmlcsstwitter-bootstrap-3grid

Accessing an image from a directory using Javascript

I have a simple question that I need help with. In my code, I currently pull images from a website using this syntax: icon: 'http://i45.tinypic.com/2yua8ns.png'. However, I would like to use something like this instead: icon: '\images/i ...

javascripthtmlcss