0

I have a page where I allow users to change the font size.

CSS as follows:

    @charset "utf-8";

#layout-1:checked ~ table tr td {font-size: 14px;}
#layout-2:checked ~ table tr td {font-size: 18px;}
#layout-3:checked ~ table tr td {font-size: 21px;}

table
{border:0;width: 100%; max-width: 480px; table-layout: fixed;
}

td {border: 1px solid #000000;}

td:nth-child(1)
{  
font-size: 200%;
text-align: center;
}

Here is the html:

<!DOCTYPE html>
<html>
    <head><link href="style.css" rel="stylesheet"></head>
<body><article>
<span>Select font size:</span>
  <input id="layout-1" type="radio" name="layout" checked><label for="layout-1"  style="font-size:14px;">M</label>
  <input id="layout-2" type="radio" name="layout"><label for="layout-2" style="font-size:16px;">L</label>
  <input id="layout-3" type="radio" name="layout"><label for="layout-3" style="font-size:18px;">XL</label>
    
<table>
<tr><td>D</td><td>Berlin</td></tr>
<tr><td>E</td><td>Madrid</td></tr>
<tr><td>F</td><td>Paris</td></tr>
<tr><td>L</td><td>Luxembourg</td></tr>
</table>
    
</article></body>
</html>

I made a pen here:https://codepen.io/msori58/pen/mdPbJRy As you can see in the result, the part of nth-child(1) which says "text-align: center" works. However, the "font-size" part doesn't. Only if I remove the font size changer part

<span>Select font size:</span>
  <input id="layout-1" type="radio" name="layout" checked><label for="layout-1"  style="font-size:14px;">M</label>
  <input id="layout-2" type="radio" name="layout"><label for="layout-2" style="font-size:16px;">L</label>
  <input id="layout-3" type="radio" name="layout"><label for="layout-3" style="font-size:18px;">XL</label>

the font-size reacts as well.

Any ideas how I can fix that?

user9
  • 145
  • 1
  • 12
  • you are overriding the font-size with your first selectors (they are more specific). Make your selector more specific – Temani Afif Aug 02 '20 at 22:44
  • how can I do that? I defined a size for the whole text and I obly want to change the size of the first column of the table. – user9 Aug 02 '20 at 23:00
  • try `td:not(#random):not(#random):nth-child(1)` .. a hack with not to use 2 ID and have a higher specificity – Temani Afif Aug 02 '20 at 23:36

0 Answers0