Can children with a shared CSS class be selected without prior knowledge of the class name?

While I was creating a customized theme for the online typing game, Typeracer (using Css), I encountered an issue: As the user advances in the game, the color of the typed text changes from gray to green. I want to change this green color to a different one. Here is how the text progress interface appears on Typeracer

The challenge is that the text block is divided into multiple spans, without any id, and they are assigned various random classes -- different ones for each game, and they change during gameplay: This image shows the structure of the text progress interface

Except for the last span shown as collapsed in the screenshot above, a dynamic number of spans depict the already typed text, and another dynamic number represent the text that is yet to be typed (In the screenshot, the initial two spans show the "typed" text, while the last two represent the "not typed" text. But these numbers can change during the game to 1 and 2, or 3 and 1, and so on.)

I observed that the spans for typed text and text yet to be typed share the same initial class: in the example from screenshot #2, the spans for "typed" text have "vdFKqLpl" as their initial class, while those for "not typed yet" have "CARsHknB" as their initial class.

I tried selecting the first group of spans based on their style.color attribute:

.span[style*="color: #99cc00;"] {
    color: #ff0000;
}

However, I did not achieve any results.

My Question is: Is it possible to use css to select child elements that share the same initial class without knowing what that class is specifically?

For instance, if the parent div is:

<div>
    <span unselectable="on" class="vdFKqLpl">When the little bluebird, who has never said a word, starts to sing, </span>
    <span unselectable="on" class="vdFKqLpl CARsHknB">"Spri</span>
    <span unselectable="on" class="CARsHknB WvLvCiod">n</span>
    <span unselectable="on" class="CARsHknB">g</span>
    <span unselectable="on">...</span>
</div>

Where "vdFKqLpl" and "CARsHknB" are randomly assigned classes that I cannot predict in advance, is it feasible to select the first two divs that share "vdFKqLpl" as their initial class?

Answer №1

Not certain if this method will provide a complete solution, but it may help you make progress.

span {
  color: green;
}
span[class*=" "], span[class*=" "] ~ span {
    color:red;
}
<div>
    <span unselectable="on" class="vdFKqLpl">When the little bluebird, who has never said a word, starts to sing, </span>
    <span unselectable="on" class="vdFKqLpl CARsHknB">"Spri</span>
    <span unselectable="on" class="CARsHknB WvLvCiod">n</span>
    <span unselectable="on" class="CARsHknB">g</span>
</div>

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

Focusing on the alignment of an article tag

I am currently facing a challenge in centering the content within an HTML article element. As of now, the content is aligned to the left margin of the page. Below is the snippet of HTML I am working with: <article> <h1>Sign In</h1> ...

Widget being affected by centering CSS styling

My CSS centering code seems to be causing an issue with a widget, as it gets pushed down below the columns. Additionally, the nav bar widget appears on all forum pages. Your assistance in resolving this problem would be greatly appreciated. Thank you. Ch ...

Using AngularJS and ChartJS together for stellar data visualization

I need help displaying the canvas element within custom angular directives. Being new to AngularJS, I am in search of a demo or idea regarding Chart.js integration with AngularJS. Important: I specifically require a custom directive for chart display. T ...

Using Javascript to open a new page and execute a script

I need to be able to launch a new window window.open(url,'_blank'); After that, I want to execute a JavaScript script like this: window.open(url,'_blank').ready("javascript code here"); However, I'm unsure how to accomplish thi ...

Choose an image and save the selection information for the following page (Tarot card)

I'm in the process of creating a website that showcases multiple tarot cards. The goal is for users to select the cards they're interested in and have their chosen card displayed on the next page. I've implemented some code for selecting the ...

Accessing .js and .css libraries from shared views in ASP.NET Core can be restricted

I am currently developing a simple application on ASP.NET core 3.1, and I'm facing a basic problem that I can't seem to solve. The menu of the application is located in a Shared view called _Layout.cshtml. I load .js and .css libraries in this v ...

Having trouble setting background images for CSS ID, but it's working perfectly for CSS Body

When working with my .CSS file: Initially, applying the following styling: body { font-size: .85em; font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif; color: #232323; background-color: #fff; background: url('Images/Login_Background.jpg'); ...

The nodejs https website is unable to render in Internet Explorer 11

Our secure website is not loading in IE11 (dnserror.html - page cannot be displayed). However, it works perfectly fine on all other browsers! The webserver we are using is a node.js app with default cipher settings. The SSL certificate is valid and enhan ...

What is the best method for gathering information from multiple input fields?

I'm currently working on developing a Polymer application that includes a search button with multiple input boxes. I want the search operation to consider all the inputs from these boxes when performing a search. Here is an image depicting the scenar ...

Drupal 6 encountering an inline AJAX error

Is there a way to add custom inline error messages to a form in Node, including CCK and other elements? I have looked at multiple modules, but none of them seem to offer a complete solution as they lack CCK support, upload support, error messages, etc. ...

If an element with a "hidden" display property is loaded in the browser window, will it be visible?

Is an element in a hidden display still using memory when the page is loaded? It's convenient to have many elements on a page, but if 99 elements are hidden and only 1 is displayed, does that impact the loading of the page? I'm curious if the pa ...

Attempting to fetch the user's username using jQuery from the database

echo "<form method='post' action='regprocess.php' id='registerform'>"; echo '<fieldset class="register">'; echo"<h2>Register</h2>"; echo "<ul>"; ...

Basic Hover Effect in Javascript

Looking at this snippet of HTML: <div id="site-header-inner"> <div id="header-logo"> <?php echo wp_get_attachment_image(get_field('header_logo','options'),'full'); ?> </div> <div id= ...

When comparing the Raspberry command line editor 'Nano' to LeafPad for editing a text file string, it leads to issues where PHP cannot interpret the string accurately

Working on a Raspberry Pi, I noticed that when using Nano as the text editor to edit a text file, PHP files struggle with querying variables correctly in SQL. However, if I use the LeafPad editor that comes built-in with the Pi, the PHP file is able to out ...

Passing index value using navigateByUrl method

I have developed a home component and a view component to display different levels of employee details. The home component presents basic information, while the view component shows comprehensive details. The code in my home.component.html file looks like ...

Utilizing a Bootstrap grid system (or an IE-compatible CSS grid) to align elements on the provided

Looking for suggestions on achieving the following layout without using CSS grid, either with Bootstrap or IE compatible CSS grid. On large screens: Head and body stack on the left, with an image on the right covering the height of both. [&mdash ...

Prevent children from extending outside the boundaries of their parent

I am facing an issue with my page layout that includes a sidebar. The content in the sidebar is overflowing the page, so I attempted to use CSS properties like overflow-y: hidden and max-height: 100vh on the main element, as well as overflow-y: auto on the ...

Creating interactive tables in HTML and Javascript where users can expand and collapse rows by clicking on a parent row

After days of trying to solve a specific issue, I have realized that I cannot do it without some help. The task at hand is to enable the functionality of clicking on a table row to reveal more details, but in my case, these additional details are presented ...

Responsive Line Breaks in Bootstrap 4

I can't seem to find any information in the documentation to guide me in the right direction here. I'm hesitant to use columns as it could result in gaps between the text. Currently, I have the date displayed at the top of my website like this u ...

Issues with navigation functionality in Internet Explorer 8 have been identified in Twitter Bootstrap 3 RC2

I am currently using Twitter Bootstrap 3 RC2 to create a navigation bar at the top of my page, which is working perfectly fine except on IE8. In IE8, it seems like the browser is rendering the page as if it were on a smaller screen, causing the menu to co ...