Tips for creating improved CSS ID rules

Currently, I am in the process of learning HTML and CSS and have a question regarding writing rules for multiple IDs. Is it possible to write rules that apply to several IDs in order to achieve my desired outcome?

<!-- language: lang-css-->

 #menu-item-207 .menu-image-title {
   color: black !important;
 }
 #menu-item-207 .menu-image-title:hover {
   color: #0095d1 !important;
 }
 #menu-item-206 .menu-image-title {
   color: black !important;
 }
 #menu-item-206 .menu-image-title:hover {
   color: #0095d1 !important;
 }
 #menu-item-205 .menu-image-title {
   color: black !important;
 }
 #menu-item-205 .menu-image-title:hover {
   color: #0095d1 !important;
 }
 #menu-item-204 .menu-image-title {
   color: black !important;
 }
 #menu-item-204 .menu-image-title:hover {
   color: #0095d1 !important;
 }
 #menu-item-203 .menu-image-title {
   color: black !important;
 }
 #menu-item-203 .menu-image-title:hover {
   color: #0095d1 !important;
 }
 #menu-item-202 .menu-image-title {
   color: black !important;
 }
 #menu-item-202 .menu-image-title:hover {
   color: #0095d1 !important;
 }
 #menu-item-201 .menu-image-title {
   color: black !important;
 }
 #menu-item-201 .menu-image-title:hover {
   color: #0095d1 !important;
 }
 #menu-item-200 .menu-image-title {
   color: black !important;

Is there a way to adapt this code to achieve what I need? Any help would be greatly appreciated!

htmlcss

Answer №1

Instead of relying on ID's, simply utilize your class:

.menu-image-title{
   color: black !important; 
}

.menu-image-title:hover{
   color: #0095d1 !important;
}

You can apply a single class to multiple elements simultaneously.

Answer №2

If you want to style multiple selectors at once, you can use commas like this:

#menu-item-207 .menu-image-title,
#menu-item-206 .menu-image-title,
#menu-item-205 .menu-image-title,
#menu-item-204 .menu-image-title,
#menu-item-203 .menu-image-title,
#menu-item-202 .menu-image-title,
#menu-item-201 .menu-image-title,
#menu-item-200 .menu-image-title {
    color: black !important; 
}  
#menu-item-207 .menu-image-title:hover,
#menu-item-206 .menu-image-title:hover,
#menu-item-205 .menu-image-title:hover,
#menu-item-204 .menu-image-title:hover,
#menu-item-203 .menu-image-title:hover,
#menu-item-202 .menu-image-title:hover,
#menu-item-201 .menu-image-title:hover,
#menu-item-200 .menu-image-title:hover {
    color: #0095d1 !important; 
}

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

Unable to vertically align an image within a navigation bar item that is not the brand

Having a unique issue for which I cannot find a solution. In the navbar of Bootstrap 4, I am attempting to include an image next to one of the items, not the navbar-brand as commonly asked about. When Bootstrap 4 is loaded with a custom alpha dark theme, ...

htmlcssbootstrap-4

Ways to implement a delay in a function?

I'm looking for a way to introduce a delay in my function. Should I enclose the function within a delay function, or is there a different method to ensure that the animation doesn't trigger until 5 seconds after the page has loaded? var textTo ...

javascriptjqueryhtmlcss

In ReactJs, you can use break tags to format a lengthy string and also apply color to certain words within the string

When working with ReactJs, my objective is to format a lengthy string by inserting <br/>. I was able to achieve this using a JavaScript function as shown below: The long string in question: export const fadeAnimation = { \n initial: {opacity: ...

javascripthtmlcssreactjs

stopping a float-left div from being pushed down by a table

I am facing an issue with two float:left divs that are supposed to stack left-to-right. One div is a fixed width left nav, while the other should span the remaining width of the browser. The problem arises when there is a table in the second div with multi ...

css

Instructions for showing a "read more" and "read less" link when the text goes beyond a

I am pulling paragraph content from the database and displaying only 300 characters on the screen, with a "read more" option for the user to see the rest of the content. However, I am facing an issue where I also need to include a "less" option for the us ...

javascripthtmljquerycss

Code snippet for calculating the size of an HTML page using JavaScript/jQuery

Does anyone know of a way to calculate and display the size/weight (in KB) of an HTML page, similar to what is done here: Page size: 403.86KB This would include all resources such as text, images, and scripts. I came across a Pelican plugin that does th ...

javascripthtmljquerysize

Adjust the dimensions of a button in Jquery Mobile using a designated class

I am in the process of creating a Mobile App using Jquery Mobile, I'm aiming for a result like this: Unfortunately, what I end up with is this: I prefer not to utilize .ui-btn in my CSS, as I have already specified custom-btn. Here's the code s ...

jquerycsshtmljquery-mobile

Why does jQuery's each function struggle to retrieve the width of hidden elements?

Why is it difficult to obtain the width of hidden elements? Here is my code: .hidden { display: none; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <ul class="navbar-items"> <li> ...

javascriptjquerycsseachouterwidth

It is not possible to alter or manipulate dynamic content received from an Ajax/JSON response when creating a dynamic PHP form

I am in need of a dynamic form that functions as follows: Upon clicking the "ADD" button, a new <div> element should appear for selecting a package. Based on the selected package, the row should change its color by adding or removing certain classe ...

phpjqueryhtmlajaxjson

Tips for enabling a keypad to restrict input field character limit

Encountering an issue with an input field that has a maximum length of 6 characters. Typing normally seems to work fine, but when using a custom keypad, the limit is not enforced and it allows for more than 6 characters to be entered. HTML: <div cl ...

javascripthtml

ng-repeat and $scope problem

I am having an issue with my page where I display 3 images in a row using Ng-repeat. When I click on any image, it only shows the first image that was displayed in that particular row. Template: <div id="galscrolldiv" class="row" ng-repeat="image in i ...

javascripthtmlangularjs

How to prevent default validation message in .NET MVC for time inputs

There is an input field with the type time displayed below: <input type="time" name="visible-start-time" id="visible-start-time" class="form-control half-input" value="@(Model==null?"":Model.StartTime.TimeOfDay.ToString())"/> https://i.sstatic.ne ...

c#htmlasp.netasp.net-mvc

What's the solution for aligning these progress bars side by side if floating them doesn't produce the desired result?

I am looking to place two progress bars next to each other, but I have tried using float: left and inline-block without success. I am open to a solution using flex, but I believe there must be a simple fix for this issue. Here is a link to the fiddle for ...

htmlcss

SVG with complete coverage of width and height

Here's the challenge: create a full window svg image with aspect distortion without using an SVG tag. Why avoid the SVG tag? Because I plan to replace the SVG later on (possibly frequently) and haven't found a simple way to do so. Previous attem ...

csssvg

I'm seeking answers on selenium and the proper use of CSS selectors, as well as troubleshooting the error message 'selenium.common.exceptions.ElementClickInterceptedException'

After some research, I think I have a grasp on CSS selectors and their appearance. However, when using selenium, how can I locate a CSS selector on a website and then click on it? The correct syntax eludes me. I encountered this error as well: selenium.co ...

pythonhtmlcsspython-3.xselenium

What are some strategies to stop a jQuery UI button created with a link from inheriting the link's text color?

I recently came across a recommendation to create a jQuery button on top of a link for redirect purposes: <a href="/search" class="button">My link</> $(".button").button(); However, I noticed that if the button class has a red foreground colo ...

jquerycssjquery-ui

Utilizing a dropdown menu in HTML to dynamically alter the URL of a button using JavaScript

I attempted to search for a solution on stackoverflow, but I found the answers confusing. In essence, I am looking to create a list from which I can select a value that will change a link when clicking a button. I believe JavaScript is necessary for this ...

javascriptjqueryhtml

Choose a single SVG file based on its unique ID

Looking for some guidance - I have a vector file with 40 svgs all combined into one image. Each vector is identified by an id inside the <g> tag. How can I select a specific svg from this single file without choosing the entire image in html? PS: E ...

htmlcssimagesvgvector

What is the reason that certain CSS pages are not being utilized on my website?

I am facing issues with rendering my website on a tablet device, specifically with my last 2 css pages (800px.css and 800pxland.css). Despite working fine just hours ago, now they seem to be neglected while all the other ones work perfectly. I have tried ...

cssftpmediatabletcloudflare

Detecting collisions in JavaScript

Currently, I am in the process of reviving an old game reminiscent of Tron using HTML5 canvas and JavaScript. The unique twist in this version is that the snakes have the ability to move in curves rather than right angles (known as Achtung Die Kurve). The ...

javascripthtmlcollision-detectionhtml5-canvas