css code for styling html elements

HTML:

<link rel="stylesheet" type="text/css" href="styles.css"><table border="0" cellpadding="0" cellspacing="0" class="month">
<tr><th colspan="7" class="month">January 2017</th></tr>
<tr><th class="mon">Mon</th><th class="tue">Tue</th><th class="wed">Wed</th><th class="thu">Thu</th><th class="fri">Fri</th><th class="sat">Sat</th><th class="sun">Sun</th></tr>
<tr><td class="noday">&nbsp;</td><td class="noday">&nbsp;</td><td class="noday">&nbsp;</td><td class="noday">&nbsp;</td><td class="noday">&nbsp;</td><td class="noday">&nbsp;</td><td class="sun">1</td></tr>
<tr><td class="mon">2</td><td class="tue">3</td><td class="wed">4</td><td class="thu">5</td><td class="fri">6</td><td class="sat">7</td><td class="sun">8</td></tr>
<tr><td class="mon">9</td><td class="tue">10</td><td class="wed">11</td><td class="thu">12</td><td class="fri">13</td><td class="sat">14</td><td class="sun">15</td></tr>
<tr><td class="mon">16</td><td class="tue">17</td><td class="wed">18</td><td class="thu">19</td><td class="fri">20</td><td class="sat">21</td><td class="sun">22</td></tr>
<tr><td class="mon">23</td><td class="tue">24</td><td class="wed">25</td><td class="thu">26</td><td class="fri">27</td><td class="sat">28</td><td class="sun">29</td></tr>
<tr><td class="mon">30</td><td class="tue">31</td><td class="noday">&nbsp;</td><td class="noday">&nbsp;</td><td class="noday">&nbsp;</td><td class="noday">&nbsp;</td><td class="noday">&nbsp;</td></tr>
</table>

css:

.sat{
    color: red;
}
.sun{
    color: red;
}
"1" {
    color: blue;
}

I am currently encountering an issue where I need to identify and target the number '1' in my HTML code, changing its color to red using CSS without affecting any other elements. However, I must accomplish this without modifying the HTML file directly as it will be constantly updated and reset by a Python script.

htmlcss

Answer №1

"2" { color: red; } is not valid CSS. CSS selectors cannot begin with numbers and should not be enclosed in quotes.

To correct this issue, consider assigning a class name "two" to your element and adjusting the CSS accordingly. Several solutions have already been provided by other answers.

It seems that the given options might not suit your situation. Achieving this effect may require using a script rather than relying solely on CSS. Below is an example of a jQuery script that can accomplish this:

<script>
    $('td').each(function(){ //loop through each td
        if($(this).html() == '2') { //check if the content of the td is exactly "2"
            $(this).css({'color':'red'}); //change the CSS rule to set color as red
        }
    });
</script>

Answer №2

.one {
  color: red;
}
<link rel="stylesheet" type="text/css" href="styles.css">
<table border="0" cellpadding="0" cellspacing="0" class="month">
  <tr>
    <th colspan="7" class="month">January 2017</th>
  </tr>
  <tr>
    <th class="mon">Mon</th>
    <th class="tue">Tue</th>
    <th class="wed">Wed</th>
    <th class="thu">Thu</th>
    <th class="fri">Fri</th>
    <th class="sat">Sat</th>
    <th class="sun">Sun</th>
  </tr>
  <tr>
    <td class="noday">&nbsp;</td>
    <td class="noday">&nbsp;</td>
    <td class="noday">&nbsp;</td>
    <td class="noday">&nbsp;</td>
    <td class="noday">&nbsp;</td>
    <td class="noday">&nbsp;</td>
    <td class="sun one">1</td>
  </tr>
  <tr>
    <td class="mon">2</td>
    <td class="tue">3</td>
    <td class="wed">4</td>
    <td class="thu">5</td>
    <td class="fri">6</td>
    <td class="sat">7</td>
    <td class="sun">8</td>
  </tr>
  <tr>
    <td class="mon">9</td>
    <td class="tue">10</td>
    <td class="wed">11</td>
    <td class="thu">12</td>
    <td class="fri">13</td>
    <td class="sat">14</td>
    <td class="sun">15</td>
  </tr>
  <tr>
    <td class="mon">16</td>
    <td class="tue">17</td>
    <td class="wed">18</td>
    <td class="thu">19</td>
    <td class="fri">20</td>
    <td class="sat">21</td>
    <td class="sun">22</td>
  </tr>
  <tr>
    <td class="mon">23</td>
    <td class="tue">24</td>
    <td class="wed">25</td>
    <td class="thu">26</td>
    <td class="fri">27</td>
    <td class="sat">28</td>
    <td class="sun">29</td>
  </tr>
  <tr>
    <td class="mon">30</td>
    <td class="tue">31</td>
    <td class="noday">&nbsp;</td>
    <td class="noday">&nbsp;</td>
    <td class="noday">&nbsp;</td>
    <td class="noday">&nbsp;</td>
    <td class="noday">&nbsp;</td>
  </tr>
</table>

Answer №3

.one{
color:blue;
}
<!DOCTYPE html>
<html>
<head>
<style>

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!--<script>
$(document).ready(function(){
  $("tr:contains(1)").css("color", "red");
});
</script>!-->
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" class="month">
<tr><th colspan="7" class="month">January 2017</th></tr>
<tr><th class="mon">Mon</th><th class="tue">Tue</th><th class="wed">Wed</th><th class="thu">Thu</th><th class="fri">Fri</th><th class="sat">Sat</th><th class="sun">Sun</th></tr>
<tr><td class="noday">&nbsp;</td><td class="noday">&nbsp;</td><td class="noday">&nbsp;</td><td class="noday">&nbsp;</td><td class="noday">&nbsp;</td><td class="noday">&nbsp;</td><td class="sun one">1</td></tr>
<tr><td class="mon">2</td><td class="tue">3</td><td class="wed">4</td><td class="thu">5</td><td class="fri">6</td><td class="sat">7</td><td class="sun">8</td></tr>
<tr><td class="mon">9</td><td class="tue">10</td><td class="wed">11</td><td class="thu">12</td><td class="fri">13</td><td class="sat">14</td><td class="sun">15</td></tr>
<tr><td class="mon">16</td><td class="tue">17</td><td class="wed">18</td><td class="thu">19</td><td class="fri">20</td><td class="sat">21</td><td class="sun">22</td></tr>
<tr><td class="mon">23</td><td class="tue">24</td><td class="wed">25</td><td class="thu">26</td><td class="fri">27</td><td class="sat">28</td><td class="sun">29</td></tr>
<tr><td class="mon">30</td><td class="tue">31</td><td class="noday">&nbsp;</td><td class="noday">&nbsp;</td><td class="noday">&nbsp;</td><td class="noday">&nbsp;</td><td class="noday">&nbsp;</td></tr>
</table>
</body>

</html>

Highlighting the td that contains the number 1.

Answer №4

Your HTML code already includes the class .one, so all you need to do is add the following CSS:

.one{color:blue;}

to change the color to blue.

Note: This suggestion assumes that the class .one is only used on elements containing "1", which seems to be the case based on your HTML structure.

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

"Using jQuery to target parent element of a checkbox and apply

Looking to modify the background color of a label based on whether the checkbox inside is checked or unchecked. Please note: Currently, the label's background changes on the first click, but it does not revert back when unchecking the box. <div c ...

jqueryhtml

What is the procedure for automatically playing the next audio track in HTML5 after the current one finishes playing

When trying to play a single MP3 file, the code below is designed to skip to a specific part of the track and then start playing from that position. However, despite the cursor moving to the correct spot in the MP3, it fails to play upon clicking the Sta ...

javascripthtmlcssecmascript-6ecmascript-2017

Guide to saving a Python docx file on the client side with the help of Ajax

I am currently using Python 3.6 with Django, and my code snippet is shown below: from docx import Document document = Document() document.add_heading('My docx', 0) document.save('myFile.docx') return HttpResponse(document, content_typ ...

pythonhtmldjangoajaxpython-docx

Tips on customizing the appearance of the dropdown calendar for the ngx-daterangepicker-material package

Is there a way to customize the top, left, and width styling of the calendar? I'm struggling to find the right approach. I've been working with this date range picker. Despite trying to add classes and styles, I can't seem to update the app ...

javascriptcssangulartypescriptangular-material

JavaScript multiplying an array in HTML

Snippet of HTML code <input name="productCode[]" value="" class="tInput" id="productCode" tabindex="1"/> </td> <input name="productDesc[]" value="" class="tInput" id="productDesc" readonly="readonly" /></td> <input name="pr ...

javascripthtml

In my development environment, the page does not have scroll functionality, but in the production environment, it is scrollable

Whenever I open a table or any other element with overflowing content, I encounter an issue with the scrolling bar. Even though the CSS includes overflow-y: scroll;, the scroll bar on the right remains in gray and does not allow me to scroll down when the ...

javascriptcssvue.jsfrontendvuetify.js

How to Create a Floating DIV with CSS

Here is the URL I am referring to: Website I want to position the Weather DIV above other content on the page while still maintaining its position when expanded or collapsed. How can I achieve this without affecting the layout of other elements? This is ...

htmlcss

Multiple Ajax(Jquery method) Submissions with just one click and issue with Image not being sent to the server

Having trouble submitting form data to the server after client-side validation using jQuery. I've been working on this all day and could really use some help. I created a jQuery slider for my login form, where it slides to the next input field after v ...

phpjqueryhtmlajax

What is the most efficient way to retrieve key pair values of separate elements in an array with just one API request?

The API I am working with returns an array of elements, each containing multiple key-value pairs. An example of a similar API response can be seen here: , where an array of poems is returned. [ { "title": "...." "content": "..." "url" : "..." } ...

javascripthtml

Display a featherlightbox popup when the page loads

Well, here's the deal. I don't have any experience with wordpress php coding at all, but I can make basic adjustments using the wordpress admin. Now I've run into an issue. I tried to use the feather lightbox js, and below is a snippet of co ...

javascriptphpjqueryhtmlwordpress

Hide other dropdown when one dropdown is clicked

I am currently working with a dropdown data-filter in combination with the isotope plugin. My goal is to have the ability to close an open dropdown when another list item is clicked, and also have the arrow twirl down when the dropdown is open. I am seek ...

javascriptjqueryhtmldrop-down-menu

What is causing my grayscale function to only impact part of the canvas?

As a beginner programmer, I have been experimenting with creating a grayscale function in JavaScript for practice. This is the code I have come up with: <canvas width='400' height='400'></canvas> <script> var can ...

javascripthtmlcanvas

Tips for arranging divs in Bootstrap 5 to position one above the other

I have chosen to utilize Bootstrap 5 for my website project with the aim of enhancing its responsiveness on all devices. Specifically, I am seeking a way to ensure that when visitors access the site from a mobile device, the image-containing div appears a ...

htmlcssresponsive-designfrontendbootstrap-5

My program is able to perform calculations even in the absence of user input

I have been encountering an issue with my PHP code that is used for performing calculations. The code is designed to take inputs from textboxes and calculate the total based on those values. However, when I click the button intended for calculating the tot ...

phphtml

Troubleshooting Bootstrap's Height Problem

After extensively searching this forum, I couldn't find a solution to my bootstrap issue. Here's the code for two forms on my page: <div class="row justify-content-md-center"> <div class="col-sm-6"> <f ...

htmlcss

How can a Vue.js toggle button dynamically change based on the combined state of two checkboxes?

My current project involves implementing a toggle feature that allows users to enable a day and then select between AM or PM using checkboxes. One issue I'm facing is how to de-toggle the button if a user unchecks both AM and PM options. Check out t ...

htmlvue.jsvuejs2

Add HTML content to a specific div according to the option selected in a drop-down menu

I am currently working on a project where I need a button to insert HTML content into a div based on the value selected in a select box. However, the functionality is not working as intended. Upon clicking the button, nothing happens. I am unsure of what t ...

javascripthtmlinnerhtml

The __init__() function in Django encountered an error with the unexpected keyword 'user' being passed

Currently, I am working on establishing a password reset system using the default django libraries. However, I have encountered an error trace while trying to access the site for changing passwords (PasswordChangeConfirm). Internal Server Error: /reset/con ...

pythonhtmldjangowebpasswords

Struggling to successfully toggle the visibility of items

I am currently facing an issue with displaying different sets of data based on button clicks. The first block of information is showing correctly upon page load, but when I try to display other blocks by clicking on the corresponding buttons, the info cont ...

javascriptjqueryhtmlcss

Accessing a template object in JavaScript using querySelector

Essentially, I am trying to querySelect a <template> from JavaScript but constantly receiving null as the result. JavaScript code: class MyImportWebcomponent extends HTMLElement { constructor() { super(); } connectedCallback() { ...

javascripthtmlweb-componenthtmlelementsnative-web-component