Can an advertisement's appearance be altered to include custom content using only CSS?

Dealing with SAP for our ticket system has been quite a challenge due to the design that is causing some frustration. In an attempt to make it more tolerable, I used CSS to make some adjustments. However, my problem now lies in the fact that they keep making unnecessary changes, like removing the title inside the span element.

I've tried to figure it out by using various IDs included in the span, but they are constantly changing and not specific enough for my needs.

The main issue I'm trying to address revolves around different priorities such as Low, Medium, High, and Critical.

Initially, I managed to change the color and font weight of "Medium" with this code:

[title="medium"] {color: #ffc14f !important; font-weight: bold !important;}

However, now that the title has been removed, the task becomes much more challenging.

The current structure looks something like this (without the title):

<span id="dropdownlistboxfBiBbQKnbu_ORlZZW_39-text-listdefintionwN9QyApR3q_23BFLBSdAqG_11-10"
data-sap-ui="dropdownlistboxfBiBbQKnbu_ORlZZW_39-text-listdefintionwN9QyApR3q_23BFLBSdAqG_11-10"
data-sap-automation-id="fBiBbQKnbu_ORlZZW" 
data-help-id="fBiBbQKnbu_ORlZZW"
class="sapMText sapMTextBreakWord sapMTextMaxWidth sapUiSelectable"
style="text-align:left">
Medium
</span>

Additional properties of the element include:

innerHTML: "Medium"
innerText: "Medium"
outerText: "Medium"

>lastChild: text
>>data: "Medium"
>>nodeName: "#text"
>>nodeType: 3
>>nodeValue: "Medium"

Unfortunately, the IDs mentioned earlier keep changing, making it difficult to specify the target elements accurately. Despite numerous attempts, I haven't been able to successfully apply CSS modifications.

Even though the content within the span still says "Medium," I am struggling to find a reliable CSS method to identify and modify it.

Here are some other approaches I've tried without success:

[span*=Medium] {color: #ffc14f !important}
[id*=fBiBbQKnbu] {color: #ffc14f !important}
span[innerText="Medium"] {color: #ffc14f !important}
[innerText="Medium"] {color: #ffc14f !important}
[innerHTML="Medium"] {color: #ffc14f !important}

This situation is quite frustrating, and any assistance would be greatly appreciated.

If further details are required, please feel free to reach out.

Answer №1

In the realm of CSS, there exists a variety of attribute selectors for styling elements.

[att] denotes an element with the att attribute, regardless of its value.

[att=val] indicates an element with the att attribute having the exact value of "val".

[att~=val] signifies an element with the att attribute containing a list of words separated by whitespace, one of which is precisely "val". If "val" has spaces or is empty, no element will be selected.

[att^=val] highlights an element with the att attribute starting with the prefix "val". An empty "val" will not match any elements.

[att$=val] showcases an element with the att attribute ending in the suffix "val". An empty "val" will not yield any selections.

It's important to determine an attribute within your span that signifies the priority level of the span.

If you've attempted

[id*=fBiBbQKnbu] {color: #ffc14f !important}

perhaps consider using

span[id*=fBiBbQKnbu] {color: #ffc14f !important}

instead for better results.

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

Troubleshoot: Unable to Change CSS on Click Using Javascript/jQuery

Having trouble creating three different buttons that toggle between various images using the CSS display property? Check out my code on https://jsfiddle.net/agt559e8/. function USradarChange1() { //document.getElementById("usradar1").src="weather/curr ...

Issue with Bootstrap 4 Navbar collapsing and not expanding again

Help needed! My navigation bar collapses when the window is resized, but clicking on the hamburger icon does not open it back up. I have included my code below. Can someone please provide guidance on how to expand the collapsed navbar? <html lang=&quo ...

Ways to configure dynamic and responsive divs using CSS exclusively (no javascript needed)!

I am looking to have my main div expand in height based on the categories div, content, or product pictures. Check out the website here Here are the issues I'm facing: The content div and categories div are both within the main div, but the produ ...

Tips for designing a flexible structure with 2 columns, each containing an additional 2 columns within

Is it possible to create a 4-column responsive layout? | column left | column right | column left| column right| I would like to achieve a single row layout on larger devices as shown below | column left | column right | column left| column right| an ...

"Troubleshooting: Why is Angular's Equalizer from Foundation not

I'm having trouble getting Foundation Equalizer (the JS tool for equalizing div heights) to function properly. The demo is not displaying correctly. I am currently using Foundation v6.1.2 My setup includes using it in an ng-view, and in the index fi ...

Interact with one div to trigger changes in another (CSS)

I successfully influenced the style of one div when hovering over another div using the "+" selector, but I would prefer to find a different solution. My goal is for this interaction to work even if the .h div and the .t div are located in separate parent ...

Using Cascading Style Sheets (CSS) to make posts appear above an image in a scrolling format

Can anyone guide me on how to show the text above an image contained within a scroll bar, similar to the picture below? Despite trying position property and searching online, I haven't found a solution yet. Your help would be greatly appreciated. ...

Scrolling behavior in two columns with sticky positioning

Both columns have varying heights, with the left sometimes higher than the right. I want them to start scrolling down simultaneously, but when the shorter column's content ends, it should stick to the bottom of the viewport and "wait" until the taller ...

Develop a circular carousel using React JS from scratch, without relying on any third-party library

I am looking to replicate the carousel feature seen on this website. I want to mimic the same functionality without relying on any external libraries. I have found several resources explaining how to achieve this. Most suggest creating duplicate copies o ...

The Facebook share button on my website is malfunctioning

Could someone please help me figure out why my custom Facebook share button is not functioning properly? When I click the button, the share window fails to appear. I have tested it as an html file on a live web server and have thoroughly reviewed the Faceb ...

The padding on the button inside the v-card is not being applied as expected

I am facing an issue with the following code snippet: <v-card height="200"> <v-card-actions class="mb-0"> <v-btn flat color="orange">Share</v-btn> <v-btn flat color="orange">Explore</v-btn> & ...

Methods for concealing the "image not found" icon in Internet Explorer and Chrome through CSS

I have images displayed on a webpage. Currently, when an image is not available, both Chrome and IE display a broken image indicator. I want to hide this indicator and only show the alternative text. Is there a CSS solution to achieve this? ...

Is there a more efficient approach to applying a basic function to multiple elements within a DIV and having it activate only upon a click event using jQuery?

This solution works, but I am looking for a more professional approach in order to adhere to the principle of "don't repeat yourself." $("document").ready(function(){ $(".child").each(function(index){ $(this).click(func ...

Prevent unnecessary image resizing during parallax scrolling animation

Check out my demonstration where the image scaling results in the margin-top of the parallax wrapper being unable to dynamically adjust. Demonstration: http://jsfiddle.net/KsdeX/12/ .wrapper-parallax { margin-top: 150px; margin-bottom: 60px; } W ...

Display a specific tab section upon clicking using jQuery or JavaScript

Hello everyone! I am completely new to JavaScript. I have added a tab slider to my HTML with 3 categories in the tab menu: All, Creative, and Branding. How can I show a div after clicking on one of the list items? I have assigned classes to the list items ...

CSS3 Animation displaying text color change on various elements in a continuous loop

I was attempting to create a dynamic animation where multiple texts change color, similar to what you can see on https://vercel.com. I have successfully figured out how to make one text change color using keyframes, but I am struggling to make each text ch ...

ng2-table ways to customize the appearance of a particular row

Hey there, I'm currently new to Angular 2 and working with ng2-table. I've successfully added a table like the one shown here to my website. Now, I'm trying to figure out how to add color to specific rows within the table. Following the ste ...

Customize hover effects for MuiCheckbox

For some reason, my checkboxes are displaying a circle on hover that I want to remove. https://i.sstatic.net/62TLL.png I attempted to make overrides in MuiTheme: export const MUI_THEME = createMuiTheme({ overrides: { MuiCheckbox: { root: { ...

Struggling to align h2 in div using bootstrap

Hello everyone! Can anyone help me figure out what I'm doing incorrectly? <div class="col-4" style=""> <h2 class="text-center vertical-center">Insert text here</h2> </div> I've attempted ...

CSS animation using a series of linked elements

Is there a way to make my buttons animate sequentially? For example, the second button should start animating only after the first one has finished. Any assistance would be greatly appreciated! a { padding: 6px; display: block; width: 50px ...