Why does only the first CSS class of my project working and not the rest-CodePudding

I am using React with CSS and for some reason, my CSS doesn't show up. Let me demonstrate.

I have my "App.js" with this code:

import './App.css';

function App() {
return(
    <div>
      <p className="wow">hhh</p>
      <p className="pow">hhh</p>
    </div>
  );
}
export default App;

And I have my App.css with this code:

.wow {
  color: blue;
};

.pow {
  color: red;
};

When I look in my browser only the first class is working and the letters are blue but not the second one or any other after. If I create a new component and import a CSS document to it as I did in the previous one the same thing will happen, the first CSS class will work and that's all after that non of the classes work.

CodePudding user response：

Could it be due to the trailing semicolon ; in your CSS? I think that's obsolete but potentially messing it up.

CodePudding user response：

I believe it's due to the following semi-colon after your first class in App.css. CSS does not support semi-colons after selectors.

.wow {
   color: blue;
}

.pow {
   color: red;
}