Can you identify the issue with this CSS selector?

After spending countless hours in front of the computer screen today, I seem to have missed a small detail. Why am I unable to target these specific cells (a1, a2, a3, etc...)?

<div class="row-a">
    <div class="a">
        <div class="1"></div>
            sdf
    </div>
    <div class="a">
        <div class="2"></div>
    </div>
    <div class="a">
        <div class="3"></div>
    </div>
    <div class="a">
        <div class="4"></div>
    </div>
    <div class="a">
        <div class="5"></div>
    </div>
    <div class="a">
        <div class="6"></div>
    </div>
    <div class="a">
        <div class="7"></div>
    </div>
    <div class="a">
        <div class="8"></div>
    </div>
    <div class="a">
        <div class="9"></div>
    </div>
    <div class="a">
        <div class="10"></div>
    </div>
</div>

CSS:

div.row-a div.a div.1 {
    border: 1px solid green;
    margin-left: 5px;
    margin-top: 5px;
    background-color:red;
    height: 50px;
    width: 50px;
}

jsFiddle: http://jsfiddle.net/tuHLE/

Answer №1

It seems like your code isn't working because you can't start a class name with a number.

To learn more about valid characters in CSS class names and selectors, check out Which characters are valid in CSS class names/selectors?.

Update: Actually, you technically can start a class name with a digit. However, if you do use a digit at the beginning of a class name, you need to escape it in your CSS. For instance, to style a div with the class "1", you would write the CSS selector like this:

.row-a .a .\31 {...}

For more information on CSS escapes, visit .

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

When typing in the textarea, pressing the return key to create a line break does not function as expected

Whenever I hit the return key to create a new line in my post, it seems to automatically ignore it. For example, if I type 'a' press 'return' and then 'b', it displays 'ab' instead of 'a b'. How can I fi ...

The persistent Bulma dropdown glitch that refuses to close

In the project I'm working on, I have implemented a Bulma dropdown. While the dropdown functions correctly, I am facing an issue when adding multiple dropdowns in different columns with backend integration. When one dropdown is open and another is cli ...

Storing binary data in Web Storage like localStorage can be achieved

I am attempting to save blob information (favicon) acquired through AJAX, into the storage of localStorage. Here's the Code : var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://g.etfv.co/http://www.google.com', true); xhr.r ...

The method contents().find('html').html() does not apply the style rules to the body

I'm currently facing a minor issue with my code. The problem arises when I attempt to set the content of an IFRAME using contents().find('html').html(). For instance, when using this code snippet: <html> <head> <s ...

Placing jQuery scripts in Blogger platform: A guide

After finding the correct codes to solve my problem in previous questions, such as How do I get an image to fade in and out on a scroll using jQuery?, I came across this helpful code snippet: var divs = $('.banner'); $(window).scroll(function(){ ...

Overriding Divs with Navigation

In my WordPress blog, the top menu consists of 3 divs: one for navigation, one for social icons, and one for the search bar. Unfortunately, the navigation div is currently overriding the other two divs, causing them to lose their functionality. When I ad ...

Efficiently loading Angular views with lazy loading techniques

I am currently working on a calculator website powered by Angular. This single-page site is fully responsive and divided into 7 sections, each featuring different calculators based on user preferences. To improve loading time, I am interested in implementi ...

What is the best way to ensure FireFox recognizes the accurate height of my divs?

Check out my code snippet on this fiddle http://jsfiddle.net/9m1Lba6u/ The code works perfectly on Google Chrome and Safari, displaying all numbers from 1 to the last one. However, when viewed in FireFox, it only shows numbers up until 99. Could there be ...

Immediate add/modify

Exploring various websites online, I've come across platforms that offer the ability to manipulate data effortlessly. From inserting records to deleting and editing them, the process seems seamless. What's intriguing is how, upon clicking the r ...

The font-face feature seems to be having issues on the server with the .NET application

I am having issues with @font-face not working when browsing on Safari 5.1+ from the server URL. The font displays perfectly in Safari when I view the HTML file, but when I convert it to an ASPX (.NET) file, the font appearance is not satisfactory at all. ...

Troubleshooting Problems with CSS Span Placement

Challenges with Span Positioning in CSS Currently, I am encountering difficulties while working on the index.html.erb file for an example Rails website. Below is a snippet of the HTML code I am struggling with (please note that this is simply a fabricated ...

Toggle the tooltip to reveal a hidden div by clicking, and then click again to close it

I've been working on implementing a toggle div with a tooltip. The issue I'm facing is that the tooltip initially displays "Click to open", but after opening the toggle, it should change to "Click to close". Can someone assist me in achieving thi ...

Is it possible to create HTML code that remains unaffected by alterations in CSS class names?

Having been using Twitter Bootstrap 3 for some time, the arrival of Twitter Bootstrap 4 has caught my attention. The new Twitter Booststrap comes with various changes, such as the renaming of .table-condensed to .table-sm, for instance. In anticipation of ...

Tips for adjusting your Navbar from transparent to solid based on screen size changes instead of scrolling

I am seeking assistance in creating a responsive Navbar that transitions from transparent to solid when the screen size changes, such as on a smartphone. I want the Navbar to remain fixed at the top of the page and not move down as I scroll. I tried adding ...

A lone slant positioned at the lower border of an object

Currently, I am working with two images stacked vertically. The dimensions of the top image are set at 100% width and 350px height, while the bottom image size is not a major concern. I am specifically interested in skewing the top image and maintaining a ...

Applying FAB (Material UI) to span across 2 columns in a CSS Grid: A step-by-step guide

Is there a way to make the zero button larger than the other buttons in its row by spanning 2 columns? I would like it to be an oversized oval shape. Appreciate any assistance you can provide. import "./styles.css"; import Button from '@mui/materia ...

list without specific order spacing

I have implemented an unordered list in the footer section of my HTML document. Within this list, the first two items consist of social media logos displayed as images. To enhance their visibility and prominence within the footer, I have assigned them a wh ...

What is the most efficient way to transform HTML into React components effortlessly?

I have been attempting to automate the process of converting HTML into React components. I followed the link below to automatically convert HTML into React components: https://www.npmjs.com/package/html-to-react-components However, I encountered an issue ...

Sending Arguments to Shiny RMarkdown

After spending several days attempting to import data into a shiny rmarkdown file, I finally decided to seek help here. I am exploring different methods to achieve my goal, but it's crucial that the final product can be accessed through a website. Th ...

Trigger the animation of a Div element when the cursor hovers over a different Div

I am interested in creating an animation where one div moves when the mouse hovers over another div elsewhere on the page. Here is an example... CSS #blue-box { position:absolute; margin-left:50px; margin-top:50px; height:100px; width:100px; background-c ...