1

I am including a class name in some of the HTML tags, but not necessarily going to use them later, if I am not using them in my CSS file, VS Code will show me this warning:

CSS class selector 'nav-links' not found

(assuming I gave the class name as nav-links)
for example, if I write the below code:

<div class='hero-introduction'>
  <h2>
    Elena Joy <br />
    Photographer
  </h2>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque molestiae dolores cum debitis
    corporis. At enim aut atque maiores omnis.
  </p>
  <a href='.gallery'>Gallery</a>
</div>

then I am getting this warning:

CSS class selector 'hero-introduction' not found

if I add this class to my CSS file then there is no error to be seen. Is it necessary to add all the class names initialized in my HTML file in the style.css file?

I am using the "HTML CSS Support" extension in Visual Studio Code.

Álvaro González
  • 142,137
  • 41
  • 261
  • 360
aditya_sharma
  • 93
  • 1
  • 1
  • 7
  • 3
    That error message probably comes from an extension. If unsure, you can try the [extension bisect](https://code.visualstudio.com/updates/v1_52#_troubleshooting-extension-bisect) feature to figure out which. – Álvaro González Dec 27 '20 at 14:53
  • Maybe [this one](https://stackoverflow.com/questions/65459034/vs-code-css-class-selector-not-found-with-angular-and-bootstrap-5-beta)? – Álvaro González Dec 28 '20 at 07:55
  • 2
    @ÁlvaroGonzález yes it worked, I deleted the HTML CSS support extension in VS code and the error messages were gone. – aditya_sharma Dec 29 '20 at 08:23
  • HTML code is not "initialized", for what it's worth. It's just parsed as-is. – TylerH Dec 29 '20 at 16:05
  • I *would* close this as a dupe of https://stackoverflow.com/questions/65459034/vs-code-css-class-selector-not-found-with-angular-and-bootstrap-5-beta as @ÁlvaroGonzález linked, but it's technically not asking where the error is coming from, and the answer below would be invalidated that way. So, leaving this open for now. – TylerH Dec 29 '20 at 16:09
  • 1
    @TylerH I've changed the title to make the question hopefully more useful. – Álvaro González Dec 29 '20 at 17:27

3 Answers3

3

No, it is not necessary to define all the class names used in the HTML in your CSS file. Classes that you specify in HTML but that are not defined/referenced in a CSS file make no difference in the visual output of your page. The warning is designed to show you that the class is not defined in any CSS file and as such might be confusing to other developers reading your code as the class serves no purpose.

chingucoding
  • 894
  • 7
  • 17
2

Downgrade your extension named "HTML CSS Support" to below version 1.5.0 (since they have added css validations in new update).

Dharman
  • 30,962
  • 25
  • 85
  • 135
Prashant Srivastava
  • 732
  • 5
  • 4
0

I also have been seeing "CSS class selector '__' not found" messages in the Problems tab in my VS Code Terminal. I disabled the HTML CSS Support extension, and now I am no longer seeing those warnings in my terminal. :)

Simon
  • 68
  • 8