1

I'm working in a framework written by another developer and I'm only allowed to touch the scss(css) but not the html. I am writing in scss and I need to change the style of an h1 inside of a div with the class "13_steps". But I can't get my style to take effect.

Example html:

<div class="13_steps">
<h1>Headline</h1>
</div>

Example scss:

.13_steps {
   h1 {
     color: black;
   }
}

I have a vague recollection of once reading that you should not name selectors "[some number]_[name]"... but I can't remember why or even if that is my problem. Does anyone have any info or ideas?

Laura Osburn
  • 19
  • 2
  • According to this answer, CSS class names should not start with digits: https://stackoverflow.com/a/449000/5611328. In your case, it is possible that the browser you are using doesn't support CSS classes starting with digits. – er-han Apr 04 '18 at 19:01

2 Answers2

0

Class name never start with number 13_steps

Use some character at starting then use number like this a13_steps

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".

https://www.w3.org/TR/CSS21/syndata.html#characters

Nishant Dixit
  • 4,704
  • 3
  • 13
  • 25
  • Thanks for the answer. I had heard before never to start with a number but I do not remember why. Could you give me a brief explanation why, or point me to an article or something? I have to go to the other developer and convince him to change his framework. – Laura Osburn Apr 04 '18 at 21:08
  • W3 standard has some conditions for naming convention which we need to follow, I updated my answer with one link I think this will remove your all doubts. – Nishant Dixit Apr 05 '18 at 05:00
  • Thanks so much!! This is super helpful! based on some of this I found a work around where I used unicode and that worked. So in the css instead of calling the selector ".13_steps" I called it "./31 3_steps" and that worked. Not ideal but it works until we can make the framework right. – Laura Osburn Apr 05 '18 at 20:56
0

Your code is correct. Make sure you're changing the scss file, if you're changing the css, it will probably overwritten when the scss compiles. Also make sure you're compiling the scss and copying it to the correct place.

Itay Gal
  • 10,075
  • 6
  • 30
  • 68