Pseudo Elements in CSS

Question

I'm currently working on a game's character database. The character data and information about all the characters is written in JavaScript and the front end design is written in CSS. Each character has certain attributes (attack, hp, recovery, etc.). The one I'm focusing on is their Stars. Their stars refer to their rarity (1 star = extremely common; 6 stars = extremely rare). The game recently introduced a super evolution technique wherein a 6 star character can become a 6 star + (read as 6 star plus) character. This is where my problem is. I know that the JavaScript will work just fine and I know that my problem is in the CSS. Please look at the code below.

This is the JavaScript for one of the Characters:

[ "Whitebeard: Four Emperors", "STR", [ "Striker", "Powerhouse" ], "6_plus", 65, 4, 5, 99, 5000000, 3148, 996, 142, 3806, 1558, 347, 1 ],

And the CSS to go with it:

.stars-6_plus:before { color: #00bfff; content: '\2605\2605\2605\2605\2605\2605\002B'; }

Ideally, I would change the JavaScript to say 6+ instead of 6_plus and the CSS the same way, but I can't figure out how to do it. I'm not sure if there even is a way to do it the way that I'm hoping for. I was told that maybe I could make a conditional so that it says 6+ when it reads 6_plus but I'm not sure if that's possible. I would really appreciate some help.

Thanks in advance.

P.S. here's a link to the database if you'd like to check it out for yourself:

http://optc-db.github.io/characters/#/search/

jQuery way of finding a string within a string:if (str.indexOf("Yes") >= 0). You could continue with replace() after you found the string. — odedta
– odedta, Commented May 7, 2017 at 6:25
Do you mean changing "6_plus" to "6+" and .stars-6_plus to .stars-6+? The latter is not going to work because + is a special character in selectors with a specific meaning. Can you show the code that specifically renders each set of stars? — BoltClock
– BoltClock, Commented May 7, 2017 at 6:28
@BoltClock i think the update is what you're referring to. ideally the five_plus one would change as well — Marc Karam
– Marc Karam, Commented May 7, 2017 at 6:30
Sorry, I meant the JavaScript that renders each character data object into HTML. — BoltClock
– BoltClock, Commented May 7, 2017 at 6:32
@BoltClock would that be written in JavaScript or in HTML? I've been looking through a lot of files to try & find what you're asking for but to no avail. I'm fairly new to both JavaScript & CSS. I've only been "succeeding" 'cause I copy what's already there to add to it. I know i probably shouldn't ask but I think that we could solve this a lot faster if you were to help me locate what you're asking for. The admin of the database said it should be in one of the HTMLs in the character folder. Here's the link: github.com/optc-db/optc-db.github.io . Hopefully you'll locate it. — Marc Karam
– Marc Karam, Commented May 7, 2017 at 18:33

Lime · Accepted Answer · 2017-05-07 20:34:04Z

2

This should work for your class example.

*[class~="stars-6+"]:before{color:#00bfff; content:'\2605\2605\2605\2605\2605\2605\002B'; }

and the html

<div class="stars-6+">
Hello
</div>

The javascript is straight forward and requires nothing special.

[ "Whitebeard: Four Emperors", "STR", [ "Striker", "Powerhouse" ], "6+", 65, 4, 5, 99, 5000000, 3148, 996, 142, 3806, 1558, 347, 1 ],

edited May 7, 2017 at 20:34

answered May 7, 2017 at 20:27

Lime

13.6k12 gold badges59 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Pseudo Elements in CSS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related