css Question posted in
Some basic documentation can be found here.

Does CSS use token or substring algorithm when processing selectors?

I have the following piece of code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      .square__element {
        font-size: 20px;
        padding: 50px;
        background-color: orange;
      }
    </style>
    <title>Document</title>
  </head>
  <body>
    <div class="square__element">Square 1</div>
    <div class="square__element--modifier">Square 2</div>
  </body>
</html>

And when I run it none of the styles declared in the .square__element{} selector are applied to the "Square 2" element.
Initially I thought that "Square 2" element should have all the styles declared in the .square__element{} selector been applied to it. That’s why I googled for a number of search queries trying to figure out whether that was me having wrong expectations, or whether my browser is glitching. But I found nothing helpful.

Then I opened w3c and was studying the specification for around an hour. I went through the whole "Syntax" chapter but didn’t find the answer either.

And, as the last mean, I asked all AI chats I had in my disposal.
Thee of them ( Bard, Chat GPT and Copilot) told me that the styles declared in the .square__element{} should have been applied tot the "Square 2" element because

"The CSS processor uses a substring matching algorithm"

However Bing chat told that the styles should not have been applied unless I have <div class="square__element square__element--modifier">Square 2</div> separated by space because

"The CSS processor does not use a substring matching algorithm, but a
token matching algorithm, where a token is a sequence of characters
that are not spaces, tabs, line breaks, or other separators. "

So, I’m still do not know the correct answer.
Could anybody please help me to figure out should or should not the rules declared in the .square__element{} selector have been applied to the "Square 2" element?
Maybe pointing me to where in the specification I missed it explained.

Tags:

2

Answers


  1. 0

    No it shouldn’t. Both square__element and square__element--modifier are two different valid class names.

    Adding a modifier like this is usually just a naming convention saying that the modifier is changing appearance or behavior to the base class (square_element). Hence, the modifier class itself shouldn’t be use alone. You can see many similar examples in Boostrap classes like this such as btn btn-lg where btn-lg makes btn looks bigger.

    This post explains pretty well what is a BEM (Block Element Modifier) naming convention and how could they be implemented.

    Login or Signup to reply.
  2. 0

    CSS uses token-based parsing (css-syntax-3§3), matches each class name as an ident (selectors§6.6) separated by spaces, and considers all of square__element--modifier a single ident token distinct from square__element because the double dashes form part of an ident (css-syntax§4.3.11, §4.2):

    ident-start code point
    A letter, a non-ASCII code point, or U+005F LOW LINE (_).

    ident code point
    An ident-start code point, a digit, or U+002D HYPHEN-MINUS (-).

    In other words, .square__element doesn’t match square__element--modifier because they are two different class names. The double dashes count as part of the class name. It has nothing to do with "substring matching", whatever the AI thinks that means. As Heretic Monkey said,

    This is the problem with asking LLMs answers to programming questions; they don’t actually know the answer, they just string together words that might be an answer.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search