0

I have been working on this app with css files for a while now and the latest one doesnt work at all for no reason ,the file is imported ,the id is correct,its in the same directory and it doesnt work.

heres the code for the component

import React from "react";
import "./allShows.css"

export default class allShows extends React.Component{

    constructor() {
        super();
    }


    render() {
        return(
            <React.Fragment>
                <div id="2header">
                    dw
                </div>
            </React.Fragment>
        )
    }
}

and the css

#2header{
    height: 100px;
    background-color: #555353;

}

Any ideas?

AverageSoul
  • 85
  • 2
  • 6
  • 1
    What do you mean by "doesnt work at all"? What have you tried to debug the problem? – Nico Haase Apr 12 '21 at 11:21
  • 1
    https://css-tricks.com/ids-cannot-start-with-a-number/ – Robin Zigmond Apr 12 '21 at 11:21
  • @RobinZigmond That is not correct for HTML 5, though. *There are no other restrictions on what form an ID can take; in particular, IDs can consist of just digits, start with a digit, start with an underscore, consist of just punctuation, etc.* https://html.spec.whatwg.org/multipage/dom.html#the-id-attribute – connexo Apr 12 '21 at 11:23
  • 1
    Change the ```#2header``` to ```#TwoHeader```. Also already answered in [T.J. Crowder's answer](https://stackoverflow.com/a/22141368/6809132) – Scircia Apr 12 '21 at 11:25
  • 1
    Does https://stackoverflow.com/q/22141358 help? – Nico Haase Apr 12 '21 at 11:26
  • Does this answer your question? [What are valid values for the id attribute in HTML?](https://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html) – Scircia Apr 12 '21 at 11:26
  • 1
    @connexo https://stackoverflow.com/questions/22141358/why-can-an-element-id-not-start-with-an-integer/22141368#22141368 – mplungjan Apr 12 '21 at 11:29

1 Answers1

-2

remove the number from the id.

selectors in css can not start with number. you can change the number or escape number in the css file.

you can escape number with \3 or \00003

for id='2header' you can try:

#\32 header {
  /* styles here */
}

read: https://medium.com/front-end-weekly/css-selector-for-element-which-have-numbers-as-class-name-b6a089989199

Aykhan Huseyn
  • 94
  • 1
  • 7
  • 2
    Please add some explanation to your answer such that others can learn from it – Nico Haase Apr 12 '21 at 11:24
  • *There are no other restrictions on what form an ID can take; in particular, IDs can consist of just digits, start with a digit, start with an underscore, consist of just punctuation, etc.* https://html.spec.whatwg.org/multipage/dom.html#the-id-attribute – connexo Apr 12 '21 at 11:25
  • @AverageSoul please remember to accept the answer to mark the question as solved. Thanks! – Ortund Apr 12 '21 at 11:25
  • @Ortund if this question is a duplicate, it should get closed. If it is not, this answer should at least receive some explanation – Nico Haase Apr 12 '21 at 11:35
  • i've edited the answer, thx – Aykhan Huseyn Apr 12 '21 at 11:44