Incorporating the use of font color in CSS styles and

Question

Incorporating the use of font color in CSS styles and

I am creating a newsletter template using foundation. Within the table, there are 2 <th> elements containing the content "Reservationnumber" and "23425-FF3234". I have multiple instances of these <th>. I want to apply a colored font to them. While I can achieve this by adding the class class="reservation__fontcolor" to each <strong> and <th> tag individually, applying it to the surrounding table does not work.

Is there a way to set the class="reservation__fontcolor" on a broader scale so that I don't have to repeat it 60 times?

In the provided code snippet, I attempted to set the

<th class="small-6 large-6 columns first reservation__fontcolor">

on the <th> tag that includes the <td> element. However, this approach was unsuccessful. Why is that?

CSS

.reservation__fontcolor {
        color: red;
       }

HTML

<table align="center" class="wrapper header float-center bgcolor">
  <tbody>
    <tr>
      <td class="wrapper-inner">
        <table align="center" class="container" style="background-color:transparent">
          <tbody>
            <tr>
              <td>
                <!-- Reservationnumber -->
                <table class="row collapse">
                  <tbody>
                    <tr>
                      <th class="small-6 large-6 columns first reservation__fontcolor">
                        <table>
                          <tbody>
                            <tr>
                              <th>
                                <strong>Reservationnumber:</strong>
                              </th>
                            </tr>
                          </tbody>
                        </table>
                      </th>
                      <th class="small-6 large-6 columns last">
                        <table>
                          <tbody>
                            <tr>
                              <th>
                                23425-FF3234
                              </th>
                              <th class="expander"></th>
                            </tr>
                          </tbody>
                        </table>
                      </th>
                    </tr>
                  </tbody>
                </table>                             
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

html css

Answer 1

Answer №1

If you want to customize the font color of a table, consider adding the class reservation__fontcolor to your table and applying this CSS code:

.reservation__fontcolor tr th{
    color: red;
}

Think of it as a navigational path - specifying that only th tags within tr tags inside an element with the class reservation__fontcolor should have the defined properties.

This approach ensures that other th tags outside of tables with that class won't inherit the property, which could occur if you used a broad selector like:

th{
    color: red;
}

If you want both th and td tags to share the same properties when inside a table with the class of reservation__fontcolor, you can use:

.reservation__fontcolor tr th, .reservation__fontcolor tr td{
    color: red;
}

The distinction between these approaches is crucial for understanding the behavior and application in various scenarios.

Best of luck!

Answer 2

If you want to customize the font color of a table, consider adding the class reservation__fontcolor to your table and applying this CSS code:

.reservation__fontcolor tr th{
    color: red;
}

Think of it as a navigational path - specifying that only th tags within tr tags inside an element with the class reservation__fontcolor should have the defined properties.

This approach ensures that other th tags outside of tables with that class won't inherit the property, which could occur if you used a broad selector like:

th{
    color: red;
}

If you want both th and td tags to share the same properties when inside a table with the class of reservation__fontcolor, you can use:

.reservation__fontcolor tr th, .reservation__fontcolor tr td{
    color: red;
}

The distinction between these approaches is crucial for understanding the behavior and application in various scenarios.

Best of luck!

Answer 3

Answer №2

Utilize a single table and assign colors by tag. Check out my Fiddle for an example.

Answer 4

Utilize a single table and assign colors by tag. Check out my Fiddle for an example.

Answer 5

Answer №3

To achieve this effect, you will need to utilize the concept of Nested CSS selectors.

Below is an example where I am working within a limited scope to demonstrate the idea, starting from the initial table element and targeting the desired th.

CSS:

<style>
    table.reservation__fontcolor th{
        color: red;
    }
</style>

HTML:

<table class="row collapse reservation__fontcolor">
   <tbody>
      <tr>
        <th class="small-6 large-6 columns first ">
            <table class="reservation__fontcolor">
                <tbody>
                    <tr>
                        <th>
                            <strong>Reservation number:</strong>
                        </th>
                    </tr>
                </tbody>
            </table>
        </th>
        <th class="small-6 large-6 columns last">
            <table>
                <tbody class="reservation__fontcolor">
                    <tr>
                        <th>
                            23425-FF3234
                        </th>
                        <th class="expander"></th>
                    </tr>
                </tbody>
            </table>
        </th>
    </tr>
    </tbody>
</table>

Answer 6

To achieve this effect, you will need to utilize the concept of Nested CSS selectors.

Below is an example where I am working within a limited scope to demonstrate the idea, starting from the initial table element and targeting the desired th.

CSS:

<style>
    table.reservation__fontcolor th{
        color: red;
    }
</style>

HTML:

<table class="row collapse reservation__fontcolor">
   <tbody>
      <tr>
        <th class="small-6 large-6 columns first ">
            <table class="reservation__fontcolor">
                <tbody>
                    <tr>
                        <th>
                            <strong>Reservation number:</strong>
                        </th>
                    </tr>
                </tbody>
            </table>
        </th>
        <th class="small-6 large-6 columns last">
            <table>
                <tbody class="reservation__fontcolor">
                    <tr>
                        <th>
                            23425-FF3234
                        </th>
                        <th class="expander"></th>
                    </tr>
                </tbody>
            </table>
        </th>
    </tr>
    </tbody>
</table>

Incorporating the use of font color in CSS styles and

Answer №1

Answer №2

Answer №3

Similar questions

Ways to extract all hyperlinks from a website using puppeteer

Iframe overlay feature functioning on Chrome but not on IE11

Utilize jQuery to create a login form within a div when triggered by clicking on

Incorporating .txt files into a static webpage using only HTML and JavaScript

External JavaScript functions remain hidden from the HTML page

Concealing categories within an accordion-styled menu

Reveal and conceal grid elements upon clicking embedded links

ReactJS Navbar component experiencing CSS hover bug

Arrange divs in a vertical stack while maintaining a layout with two columns

Inquiry into the use of Jquery.ajax()

"Unlocking the power of Bootstrap modals in Django

Displaying all items in the flexbox in a single row by decreasing the width of each individual box

Creating a full-width layout with CSS div

`Stop the JW Player from playing several videos simultaneously`

Updating an SVG after dynamically adding a group with javascript: a step-by-step guide

The background image is failing to display

An Angular JS interceptor that verifies the response data comes back as HTML

What is the source of this additional space?

When viewing a webpage on a small browser, the content will automatically expand to fill the

In Google Chrome, the :after element on the left is cleared, while other browsers do not