How can I replace text using CSS for a specific button with the same class

Question

Is there CSS to replace a specific button label even though the class for 2 buttons are same?

Both the buttons are in different pages.Is there a way to replace the label using their current label like "Next" or "Finish"?

I tried below. It worked but it changed the label for both buttons.

.uiButton .label {visibility: hidden;}

.uiButton .label:after {content:'Submit';visibility: visible;position: fixed;}

Possible duplicate of [Is there a CSS selector for elements containing certain text?](https://stackoverflow.com/questions/1520429/is-there-a-css-selector-for-elements-containing-certain-text) — frodo2975, Apr 01 '19 at 02:08
Is there any parent selector on the page that's unique? If not you might be out of luck. — Bryce Howitson, Apr 01 '19 at 04:25

frodo2975 · Answer 1 · 2019-04-01T03:16:38.897

0

You should add a class to differentiate the buttons. It's a bad practice to try and base your css on the content of the buttons. What if the wording changes slightly in the future? It would break your css.

Edit: I had assumed you controlled the html, but if you don't, an easier way may be to look into using nth-child or other selectors to find your buttons. Like, perhaps .buttonsContainer .uiButton:nth-child(2)

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

edited Apr 01 '19 at 03:16

answered Apr 01 '19 at 02:10

frodo2975

10,340
3
34
41

I do not have access to change the buttons class. I only have access to change anything through CSS. I totally understand that if the text changes in future, it will break. – Somasekhar Ghanta Apr 01 '19 at 02:18
Ah, I see. I've updated my answer with another suggestion about how to find them. – frodo2975 Apr 01 '19 at 03:17

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

You cannot select an HTML element based on its content.

You CAN select based on element type, class/id, attribute or based on a parent.

<element id="thisID class="thisClass" attribute="thisAttribute>
 some conent
</element>

element {
 styles
}

#thisID {
 styles
}

.thisClass {
 styles
}
element[attribute="thisAttribute"] { 
  styles
}

For this to work with a button you would need to key off the VALUE not the content.

<button value="somethingUnique">Button Text</button>

button[value="somethingUnique"] { 
  your override styles
}

Your best bet is to examine all the parents up the chain until you find a unique class or ID to select. (many pages have something like <body id="contactus")

Then use that to make the button unique.

#contactus .uiButton label {}

How can I replace text using CSS for a specific button with the same class

2 Answers2

You cannot select an HTML element based on its content.