Customizing the font style on a CSS changing table

Below is the CSS code snippet I am using:

table.Table12 { border:1px solid blue; }
table.Table12 td { border:1px solid blue; width:200px;}
table.Table12 a:link { font-weight: bold;}

Additionally, here is the HTML code:

<table class="Table12" align="right">
<tr><td><a href="http://www.example.com/test1.php">test1</a></td>
<td><a href="http://www.example.com/test2.php">test2</a></td></tr>
<tr><td><a href="http://www.example.com/test3.php">test3</a></td>  
<td><a href="http://www.example.com/test4.php">test4</a></td></tr>
</table>

Currently, all tables have a bold font style applied. However, I want to change the font of "test3" to normal in the CSS. Is this achievable?

htmlcssfonts

Answer №1

Give this CSS a try:

table.Table12 td:nth-child(3) { font-weight: normal; }

Oops, I overlooked the last line of your CSS code. This one should work better:

table.Table12 tr:nth-child(2) td:nth-child(2) a { font-weight: normal; }

For more insights on the nth-child syntax, check out this resource: How can I get the second child using CSS?

Answer №2

According to Nik, the correct way to add styling is in the CSS rather than directly in the HTML code. This should be included at the end of the CSS file. Here is an example:

table.Table12 { border:1px solid blue; }
table.Table12 td { border:1px solid blue; width:200px; }
table.Table12 a:link{ font-weight: bold; }
/*Solution*/
table.Table12 td:nth-child(2) { font-weight: normal; }

This implementation will take effect immediately.

You can also assign a class to the style and reuse it later on:

.normal-font { font-weight: normal; }

In your HTML file, you can use this class as follows:

<table class="Table12" align="right">
<tr><td><a href="http://www.example.com/test1.php">test1</a></td>
<td><a href="http://www.example.com/test2.php">test2</a></td></tr>
<tr><td><a href="http://www.example.com/test3.php" class="normal-font">test3</a></td>  
<td><a href="http://www.example.com/test4.php">test4</a></td></tr>
</table>

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

Determining the orientation of an image in JavaScript

Currently, I am attempting to determine the orientation of images using JavaScript in order to apply a specific class to them. This process seems to be functioning correctly on Firefox, but is presenting challenges on other browsers. It appears to work bet ...

javascriptjqueryhtmlcssbrowser

My code written using Visual Studio Code is not displaying properly when I view it in my browser

I have been following along with a tutorial series that can be found at this link. This link will take you to the third video in the series, but I have also followed and programmed alongside the first and second videos. After installing Visual Studio Code ...

javascripthtmlcssvisual-studio-codesass

Content from PHP's unlink() function continues to persistently display

I run an Angular front end along with a PHP back end for my website. I utilize PHP's unlink function to remove specific images from Angular's assets folder: $fileToDelete = "../src/assets/images/".$name; unlink($fileToDelete) or die("Error delet ...

phphtmlangular

What is the best way to pinpoint a specific Highcharts path element?

I am currently working on drawing paths over a graph, and I am looking to dynamically change their color upon hovering over another element on the page - specifically, a list of data points displayed in a div located on the right side of my webpage. Below ...

javascriptjqueryhtmlcsshighcharts

Restoring hover functionality after resetting color using jQuery - tips and tricks

My jQuery code is working well, but I am facing one issue. After clicking on my infocontent menu, the hover effect on h1 is no longer working. How can I bring back the hover function? Here is the HTML: <div class="infocontent"><h1>What?</h ...

jquerycsshoverreset

"Utilizing a Font Awesome icon within the dropdown list of a combobox in Ext JS

I have attempted multiple methods to add an icon in the displayfield when a combo box item is selected without success. Here is the fiddle link for anyone who would like to help me with this issue. Your assistance is greatly appreciated. View the example ...

cssextjscomboboxiconsfont-awesome

Loading information in a directive by utilizing promises in a service with AngularJS

Can anyone lend a hand? I've been struggling to solve this issue. I created a directive (see below) to display a pre-written ul-list on a page using html data fetched asynchronously from a database server. Both the Directive and The Service are funct ...

javascripthtmlangularjsservice

Utilizing Bootstrap 4 to seamlessly transition the navbar-brand image to overlap on larger screens, and shrink-to-fit on smaller screens

I have a challenge that I'm working on. My goal is to make the navbar-brand image overlap with the navbar without changing its height, as the navbar itself has a fixed height of 80px. The current solution kinda works, but I am facing an issue ...

csstwitter-bootstrapbootstrap-4

Android mobile browser lacks visibility of certain elements

please provide a brief description of the image The issue I am facing is consistent across all mobile browsers, with the exception of Firefox. It also manifests in Windows Chrome devtools mode and when the device toolbar is activated. I came across a sim ...

htmlcss

Having Trouble with Click Function: Loading Pages into Div using Jquery/Ajax

Struggling to load content from other pages into a specific div by clicking on a URL link? Despite having previously executed the code successfully, it seems to redirect to the linked page instead of loading in the desired div. Even with an alarm set up as ...

javascriptphpjqueryhtmlajax

Problem with Jsdom retrieving document

I am struggling to utilize jsdom for loading a local HTML file. Here is the code snippet: var config = { file: "filename", scripts: ["node_modules/jquery/dist/jquery.min.js"], done: function(err, window){ con ...

javascripthtmljsdom

Tips on attaching a class to elements in a loop when a click event occurs

In my HTML, I am displaying information boxes from an array of objects that are selectable. To achieve this, I bind a class on the click event. However, since I am retrieving the elements through a v-for loop, when I select one box, the class gets bound to ...

javascriptcssclassvue.js

Using the CSS property `absolute` can result in the input element shifting when entering text in Chrome

My grid layout is causing some issues with the search box placement. Whenever a user starts typing in the input box, it jumps to the other side of the page. After investigating, I realized that the culprit is the position: absolute property. Oddly enough, ...

htmlcss

Issues with playing Html 5 video arise when making an ajax call

My goal is to implement an AJAX call followed by displaying an HTML5 video. The provided code snippet seems to be ineffective. $.ajax({ type: "POST", url: "Videos.aspx/GetBlocs", contentType: "application/json; charse ...

jqueryajaxhtmlhtml5-video

Using two modal popups while passing an identifier

UPDATE: In my investigation, I discovered that a plain input tag without MVC RAZOR works as expected: <input type="text" class="hiddenid2" /> //WORKED However, when using the following code, it does not work: @Html.Editor("id", "", new { htmlAtt ...

javascriptjquerycssasp.net-mvcbootstrap-modal

What is the best way to add a right-hand side navigation bar without blocking the scrollbar from view?

Take a look at this webpage: I am designing a website that includes a header, a footer, and a central container with left and right navigation bars surrounding a content area. However, I want the scrollbar for the content to appear on the right side of th ...

css

Placing text over an image appears to be causing the navigation links to vanish - could it be a conflict with floating elements?

As a beginner, I'm facing a rather embarrassing situation here. Picture me banging my head on the table level of embarrassment... but let's give it a shot anyways. I've got a navigation bar and an image underneath (not behind). Both seem to ...

htmlcss

Employing a Button with PHP

Here is the code I've been working on: <html> <form action="employee.php"> Enter Employee SSN to Delete:<br> <input type="number" name="ssnDel"> <br> <br> <input type="submit" value="Submit"> </form> ...

phphtml

Populate HTML drop-down menu with Java ArrayList

I am looking to implement multiple drop down select in JSF. I came across this code that offers a solution: <select id="dates-field2" class="multiselect-ui form-control" multiple="multiple"> <optio ...

javahtmljsfbootstrap-4

Personalized hover effect using CSS on Caldera Forms

Struggling to customize the CSS style of my Caldera forms on a WordPress site. My goal is to add a hover effect to the radio checklist fields. Currently, I've only managed to style the bullets and need help adding a hover effect to the fields themselv ...

csswordpress