Css class only works if I add a random digit in front of it

Question

I ran into some bizzare CSS behavior when I was refactoring my style tags into a separate CSS file. Here is my HTML; the "parentOfViewCommentsLink" is the specific class that's acting strange.

            <div class="parentOfViewCommentsLink" style="height=20%">
                <span ng-show="image.description">{{ image.description }}  </span>
                <div ng-hide="image.description" class="noDescription">No Description Found</div>
                <!-- <div data-ng-click="vm.navToComments()">Comments</div> -->
                <div class="viewCommentsLink" ng-click="vm.viewComments()">View {{image.comments.length}} Comments</div>
                <div class="{{vm.flagClass}}" ng-click="vm.flagged()"> </div>
                <!--<div class="ion-archive" ng-click="vm.downloadMoment(image)"> </div>-->
            </div>

and my CSS:

/* Comments */
.viewCommentsLink {
  position: absolute; 
  bottom: 10px;
  left: 10px;  
}

.parentViewCommentsLink {
  position: relative;
}

This HTML/CSS produced this bizzare result:

Scratching my head at this strange behavior because it just worked - All I did was extract my style tags into a CSS file. After playing around with it I was able to fix it!

How you might ask? Well I threw a '2' in front of the class name:

<div class="2parentViewCommentsLink" style="height=20%">
                <span ng-show="image.description">{{ image.description }}  </span>
                <div ng-hide="image.description" class="noDescription">No Description Found</div>
                <!-- <div data-ng-click="vm.navToComments()">Comments</div> -->
                <div class="viewCommentsLink" ng-click="vm.viewComments()">View {{image.comments.length}} Comments</div>
                <div class="{{vm.flagClass}}" ng-click="vm.flagged()"> </div>
                <!--<div class="ion-archive" ng-click="vm.downloadMoment(image)"> </div>-->
            </div>

CSS:

/* Comments */
.viewCommentsLink {
  position: absolute; 
  bottom: 10px;
  left: 10px;  
}

.2parentViewCommentsLink {
  position: relative;
}

I have no idea why this worked or why it would even make a difference. I do not have another class name parentOfViewCommentsLink anywhere and at this point I'm just curious as to why this even worked. Anyone have any ideas?

EDIT: "I've also tried "parentViewCommentsLink", "viewCommentsLinkParent" niether of which worked

My guess is that parentOfViewCommentsLink has different styles somewhere else, which cause this behavior. Hence, when you use a completely different css class, the issue is fixed indirectly. — orabis, Jan 06 '18 at 21:27
Probably unrelated, but `style=30px` should be `style: 30px` — Daniel Apt, Jan 06 '18 at 21:33
Removing `position: relative;` altogether might fix the issue as well. — xdevs23, Jan 06 '18 at 21:34
You mention `parentOfViewCommentsLink` in the text of the question (just before the first snippet of code) and, within that snippet of HTML, the `
` element has the class attribute set to: `parentViewCommentsLink` There seems to be a missing, or surplus, `Of` in one of those strings. — David Thomas, Jan 06 '18 at 21:35
Thats a typo, someone asked me to replace my pictures with actual code. I'll go fix it — MatTaNg, Jan 06 '18 at 21:38

score 1 · Answer 1 · answered Jan 06 '18 at 21:42

1

Turns out I don't actually need parentViewCommentsLink at all. In fact HAVING the class is causing the issue.

In addition, if you add a number in front of a CSS class it becomes invalid. So since I put a number in front of the CSS class it became invalid and it worked because I never even needed the class.

And not adding a number made the class valid which broke it. It was doing more harm than good.

Bizzare situation. Thanks for your help reguardless.

answered Jan 06 '18 at 21:42

MatTaNg

923
8
23
41

Please see this answer: https://stackoverflow.com/questions/21227702/is-there-a-workaround-to-make-css-classes-with-names-that-start-with-numbers-val/21229901#21229901 . It explains properly what is and is not valid with regard to digits at the start of class names. – Alohci Jan 06 '18 at 21:46
Was just about to ask what happened if you escaped the digit in the CSS file (`.\2parentViewCommentsLink {...`). You can use digits (or virtually any other character in class names if you escape them. – steveax Jan 06 '18 at 21:47
2

@steveax Ehm, no. `.\2...` does not match a class starting with 2. If you want to match a 2 at the beginning, you should write `.\32...` – Mr Lister Jan 06 '18 at 22:24

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

We've got way too little info to give you an accurate answer.

Most likely there are additional rules being applied to the element. Inspect the element and look for the css rules.

All modern browsers come with dev tools. right click the element and choose inspect, a window will pop up which will help you debug css issues.

Once you know WHY it's being displayed like that, you can go hunt for the relevant rules. They might be in some other file and being overwritten due to import order.

Css class only works if I add a random digit in front of it

2 Answers2