What could be causing only the initial CSS class in my project to be functional while the others are not?

Currently, I am facing an issue while using React with CSS. It seems like my CSS styles are not being applied correctly. Let me illustrate the problem.

In my "App.js" file, I have the following code:

import './App.css';

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

Furthermore, my App.css contains this snippet of code:

.wow {
  color: blue;
};

.pow {
  color: red;
};

Upon inspecting my webpage, I noticed that only the first CSS class (blue text) is working properly. None of the other classes seem to be applied. This behavior persists even if I create a new component and import a separate CSS file for it - only the initial style appears to work.

Answer №1

Is it possible that the issue is caused by the presence of a trailing semicolon ; in your CSS? It may be outdated and causing some trouble.

Answer №2

In my opinion, the issue is caused by the semi-colon that comes after the first class in your App.css file. It's worth noting that CSS does not permit semi-colons to be used after selectors.

.wow {
   color: blue;
}

.pow {
   color: red;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What solutions are there for resolving the error "Cannot read property 'style' of null" in JavaScript?

My function is designed to update the progress bar based on the document's loaded value. However, for some reason, it seems that this specific element is unable to render. Despite my efforts, I cannot figure out why other div elements can be identifie ...

Having trouble resolving the 'crypto' module error after using xlsx-populate in React JS? Here's how to fix it!

Recently, I encountered an issue when using the xlsx-populate package in my React JS application. Compiled with problems: ERROR in ./node_modules/xlsx-populate/lib/Encryptor.js 14:15-32 Module not found: Error: Can't resolve 'crypto' in &a ...

Attempting to align HTML lines in a more compact manner

I can't seem to figure this out - I'm trying to stack three lines of text (one small, one big, one small) with single-spacing between them. However, no matter what I try, the larger font line always ends up with a double-space above it (for examp ...

The Bootstrap dropdown is causing a paragraph to have an overflow issue

When my paragraph text contains too many words, it tends to overlap. Take a look at the code snippet below: <a class="dropdown-item content btnOpen"> <div class="col-sm-12"> <div class="row"> <div class="col-md-2 p-1"> ...

The slider thumb on materialized CSS HTML5 Range is not visible

After updating to Materialize 1.0.0, I noticed that the thumb is not showing on the HTML5 range input. Interestingly, when using Materialize 0.100.2 or 0.97.3, the thumb is displayed correctly. Unfortunately, I can't revert back to the older version ...

check title variable using ID in selenium webdriver

When using selenium IDE to test my site, I encountered a challenge on some pages where there is a link with a variable ID. For example: () Every time a user clicks on this link, the site takes them to a process page with a changing number (variable). Due ...

Exploring the integration of Vue.js and Requirejs for efficient development

After creating a new Vue.js project with vue-cli and building it using the command: vue build --target lib --name myWidget src/main.js I needed to utilize Requirejs for loading: <script> requirejs.config({ paths: { ...

The Model.updateOne() function seems to be failing to update some fields

I am attempting to execute a PATCH update on a MongoDB document. I fetch the existing document using Mongoose in the following manner: const ratePlan = await RatePlan.findOne({ _id: req.params.id, }) The code snippets provided above work effectively in ...

An effective method for appending data to a multidimensional array in Google script

Is there a way to expand a multidimensional array of unknown size without relying on a Google Sheets spreadsheet to manage the data? I've searched everywhere but can't find an example for a 3-dimensional array. Here's the challenge I'm ...

Creating Random Identical Color Schemes in React

I have managed to successfully generate random colors, but now I am facing an issue where I need to assign the same random color for the background of each orderNumber. Can anyone help me with this problem? If you would like to review my code, please visi ...

Manipulating the display style of an element without using jQuery

Could anyone assist me with this issue? I am currently facing a challenge in making the following script functional. It is intended to hide the button after it has been clicked. The script is being called through Ajax and PHP, so I am unable to utilize jQ ...

Taking steps to prevent the browser's back button from functioning

Is there a way to prevent the user from briefly seeing the previous page before the current page reloads with all API requests? If so, how can this behavior be avoided? import React, { Component } from "react"; import { BrowserRouter, Route, Swi ...

Having issues with jQuery animation not working correctly?

Here is the code snippet I am working with: function move() { $(document).mousemove(function(e){ var x = e.pageX; $('.linkHover').animate({'right': '=' + x + 'px'}, 'slow'); }); ...

Having trouble retrieving input values from forms in Angular 2?

Currently, I am using a modal form that loads information about my items when it is open. However, when I try to submit, all inputs are null except when the modal displays which works fine. <div id="modal1" class="modal"> <form #formData=' ...

Interactive web page with dynamic JQuery functionality and navigable page links

I am working on the project/index.html page <html> <head> <title>Index</title> <scripts...> </head> <body> Hello <div id="content"></div> <button id="page1" value="page1"/> <but ...

Require assistance with try-catch statements

I am troubleshooting an issue with a try-catch block in my Protractor test. Take a look at the code snippet below: try { element(by.id('usernameas')).sendKeys(data); } catch(err) { console.log('error occurred'); } To test the ...

Having trouble accessing jQuery function within WordPress

Why is there a ReferenceError: Error message that says "manualEntry is not defined," appearing while trying to use the code snippet below in a Wordpress environment? <a href="#" onclick="manualEntry()">hide</a> <script ...

Is there a way to transfer the selected item's id from the dropdown to the Django form action URL?

Issue My problem is that I need to pass the ID from the selected transaction item in the dropdown to the form action URL 'cart_add'. I have successfully retrieved the ID from the selected dropdown value, but I am struggling to pass this ID to the ...

Error in Access-Control-Allow-Origin when using Node.js and JSONP

It seems like JSONP eliminates cross domain restrictions. I am currently attempting to create a JSONP service with node and express. Below is a simple example of the code: self.routes['/portfolio'] = function(req, res) { // Website you wis ...

How to access a variable in an Angular Factory's callback function from outside the factory

Here's a look at the structure of My Factory: .factory('MyFactory', function(){ return: { someFunction: functon(firstParam, secondParam, resultObject) { $http.get(url).success(resultObject); } ...