Having difficulty linking a subclass in HTML with CSS

<div class="section-3">
  <div class="section-3a">
    <div class="section-3a(a)">
      <p>light background color (header and sidebar)</p>
    </div>
    <div class="section-3a(b)">
      <p>#FFFFFF</p>
    </div>
  </div>

.section-3 .section-3a .section-3a(b){
}

Encountering an error when trying to access the subclass of section-3a(b) in my code editor. Any suggestions on how to resolve this issue?

Answer №1

One important point to note is that using class names in this way is not recommended.

You cannot reference parentheses () in class names like you would with other classes, but if you really need to, you can target it using .body-2a\(b\)

.body-2 .body-2a .body-2a\(b\){
  color: red;
}
<div class ="body-2">
        <div class ="body-2a">
        <div class ="body-2a(a)">
        <p>dark background color (hero and footer)</p>
        </div>
        <div class ="body-2a(b)">
        <p>#1F2937</p>
        </div>
        </div>

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

Navigating the Foundation Topbar - Should I Toggle?

Is there a simpler way to achieve the navigation I desire, similar to the switcher for uikit? Instead of using data-toggler on each tag in my top bar, is there an easier method where I can click links in my top bar to display different content without go ...

What is the title of a document that is linked behind an HTML link?

I am seeking a way to automatically retrieve documents from web pages using a Python script. The links in the HTML pages appear as follows: href="https://foo.bar/view.php?id=123456" When clicked on in a web browser, these links open the document with its ...

Differences between Absolute URLs in HTML files on Servers and in Local Environments

I have configured absolute paths for images on my website. The directory structure is as follows: Root Client -- Images ---a.png -- Index.html When using a.png in Index.html, I set the src as "/client/Images/a.png". This works fine on the serv ...

yii2 truncates CSS classes in the email templates

My email sending process involves using a template: $content='Message'; Yii::$app->mailer->compose('@app/mail/templates/templ', ['content'=>$content]) ->setFrom('<a href="/cdn-cgi/l/email-protection" c ...

Guide on using JavaScript to implement the universal CSS selector

One technique I frequently employ is using the CSS universal selector to reset the dimensions in my HTML document: * { border: 0; margin: 0; padding: 0; } I wonder if a similar approach can be achieved with JavaScript as well? When it come ...

What is the best way to make a container 100% tall and display a navigation bar?

Struggling to properly render my React page This is what I have: ReactDOM.render( <React.StrictMode> <Provider store={store}> <Router /> </Provider> </React.StrictMode>, document.getEl ...

Using XSLT with JavaScript

I am currently working with a set of XML files that are linked to XSLT files for rendering as HTML on a web browser. Some of these XML files contain links that would typically trigger an AJAX call to fetch HTML and insert it into a specific DIV element on ...

What causes Next.JS to automatically strip out CSS during the production build process?

Encountering unpredictability in CSS loading while deploying my Next.JS site. Everything appears fine locally, but once deployed, the CSS rules seem to vanish entirely. The element has the attached class, yet the corresponding styling rules are nowhere to ...

What is the best way to ensure a multi-page form is validated using HTML5 and JavaScript before progressing to the next page?

Currently, there are two functionalities at play. The submit button is not being recognized while the functionality in JS $(".next").click(function(){..} is working as expected. HTML This section involves 4 fieldsets. I am attempting to validate ...

What is the best way to style multiple classes within the same element (specifically an ordered list ol

Using CSS counters, I have created various styles for an ordered list <ol> by applying different classes and adjusting the styles accordingly. Now, I want the counters to adjust based on screen size, displaying smaller numbers on smaller screens. To ...

Strange Safari 15 bug causing unexpected transformations

Hey there, I'm a div with animation on scroll using GSAP. On Safari 15 (no issues below 15), something strange is happening - parts of the letters are leaving an afterimage on the sides. The code snippet I am using for this animation is: this.$refs.l ...

rearranging nodes from multiple arrays into a single array and then repositioning them within the parent array using angularjs

[![enter image description here][1]][1]I am working with AngularJS and I have multiple arrays named list1, list2, and list3. Each array is used in a different list. Within my application, there are two buttons and two divs - the left div displays elements ...

Ensure your mobile device is age 13 or over before proceeding

I am developing a project with Next js. Here, I want to render a component if it is a mobile device. However, if I use the isMobileDevice value in jsx, I get the errors below. import useTranslation from "next-translate/useTranslation"; import isM ...

Creating a Django URL path using an HTML search form

Within my template, I have implemented an input field with the type "search". Upon triggering an action, the page redirects to "/search_results.html". The current dilemma I am facing is that it is adding /?search=yoursearch to the end of the URL. This is ...

How can I pass an Objective-C object to JavaScript?

Currently, I am working on a UIWebView project that involves HTML and JavaScript. One of my friends is working on something similar but for Android. The challenge I'm facing is that in Android, there is a simple way to send an Android object to JavaS ...

Steps for generating a dropdown menu using API JSON information

I'm new to using Webapi with AngularJS. I have a URL that returns data in JSON format, and I want to extract only the employee names from the data and display them in a dropdown list using AngularJS. Any assistance would be greatly appreciated. ...

"Encountering issues with updating the .css file while debugging in ASP.NET MVC 2, changes

I've been working on an MVC 2 Project and ran into an issue. I made changes to the attributes of an id in the Site.css file, specifically changing the color from White to Red. However, when I run the application, the changes are not reflected on the v ...

What is the best way to ensure that an element remains active even after a page refresh?

I have been using this code to activate the current element, which I came across on a website called "w3schools.com". However, whenever I refresh the page, the currently active element disappears. Is there a way to ensure that the active element remains hi ...

When a label is clicked, the ng-change event is not triggered on the corresponding radio button

I developed a custom directive that allows you to select a radio button by focusing on its label and pressing the spacebar. However, although the radio button is checked, the ng-change function action() does not get triggered. Below is the HTML code snipp ...

Transferring data from JavaScript to PHP with the help of AJAX

I am encountering issues with my code, as I cannot seem to successfully send coordinates from JavaScript to PHP using AJAX. Although I can retrieve values from JavaScript into a textbox, the values are not being transferred to PHP. Any assistance on resolv ...