semicodin Posted March 27, 2022 Share Posted March 27, 2022 (edited) Hello, this is my first post. How’s everybody today? 😊 So I’m experiencing high drama over something I thought would be so simple! I have spent close to 2 hours on this silly thing and remembered — wait, I just got registered with W3’s Forum! It almost doesn't seem fair to stick you with the following Little Monster but . . . well, we gotta learn sometime lol. See my User name? I’m semi talented at codin’ 😉 Here she is, the Little Monster: STYLE_ONE_ROW_IN_AN_nth_child.html Edited March 27, 2022 by semicodin Link to comment Share on other sites More sharing options...
semicodin Posted March 27, 2022 Author Share Posted March 27, 2022 I just realized I didn’t give you the issue. I’m trying to get one row in an nth child table to drop out of the table’s styling and style independently. I created this little working table to be very lo fi to make it easier to isolate the problem. As you can see, the table is rendered in Monospace. I want the one row to be in Sans Serif, with a different background and text centered. And then I want the table to return to its Monospace fundamentals. Now, if this gets to be a coding drama I'll just chuck it and shove another table (two if necessary) directly under that row to get my effect. So if you think in the long run that would actually be easier please DO tell me! I've already started down that fork anyway. Thank you Forum. Link to comment Share on other sites More sharing options...
Ingolme Posted March 27, 2022 Share Posted March 27, 2022 You wrote <span style="SANS"> instead of <span class="SANS"> 1 Link to comment Share on other sites More sharing options...
semicodin Posted March 27, 2022 Author Share Posted March 27, 2022 (edited) You are correct. What’s more disturbing – I have actually used the two interchangeably and had them render. 😳 I kid you not. It’s true, I mostly code HTML for my own private use (and play quite fast and loose with the rules, recklessly shoving <TD>s here and there, displaying correctly when they shouldn’t) but this is a huge eye opener for me and I can’t thank you enough. Now what about the background? Any way to override the nth child? I’m not highliting. The whole row needs to have its own background. Oh and may I also ask: What is the correct way to state a table’s <td>s and <th>s — TABLE, TH, TD { TABLE TH, TD { TABLE TH TD { Or does it matter? Thank you again. Wow. Edited March 27, 2022 by semicodin Link to comment Share on other sites More sharing options...
semicodin Posted March 27, 2022 Author Share Posted March 27, 2022 I just awarded you! This forum rocks! Link to comment Share on other sites More sharing options...
Ingolme Posted March 28, 2022 Share Posted March 28, 2022 <span> elements are inline. If you want to whole row to be styled, put the class on the <td> element instead and update the CSS selector accordingly. TABLE TR .SANS { <tr> <td colspan="3" class="SANS">▶▶▶▶▶THIS ROW’S STYLING SHOULD CHANGE HERE</td> </tr> A comma separates different selectors. "TABLE, TH, TD" means select all <table> elements and also all <th> elements and <td> elements. "TABLE TH, TD" means select all <th> elements that are descendants of tables and also all <td> elements of any kind. "TABLE TH TD" selects <td> elements which are descendants of <th> and those <th> elements must be descendants of <table> elements. You should read the CSS tutorial so that you're clear on exactly what each CSS selector does: https://www.w3schools.com/css/default.asp The correct way to select <td> and <th> elements that belong to a <table> is table th, table td, but keep CSS precedence rules in mind because other selectors might override these. Link to comment Share on other sites More sharing options...
semicodin Posted March 28, 2022 Author Share Posted March 28, 2022 (edited) If you look on Line 66 of the HTML file I uploaded you’ll see background-color: ~~ That is the correct way to code the CSS for a flooded table row. But place it in an nth child table and it renders as hilighting (type it background: ~~ and it won’t even render partially). So I come full circle to where I started with this Little Monster. Should I just shove a new table — initiating new nth child counters — directly under my code (after removing border-bottom obviously)? Edited March 28, 2022 by semicodin Link to comment Share on other sites More sharing options...
Ingolme Posted March 28, 2022 Share Posted March 28, 2022 Your background color was being applied to a <span> element, not to the table row. The <span> is an inline child element of the table cell which is only as wide as the text it contains. The solution I provided in my previous post will apply the background color to the table cell instead of the span. Link to comment Share on other sites More sharing options...
semicodin Posted March 28, 2022 Author Share Posted March 28, 2022 I’m attaching both my code and a screenshot. The attached screenshot was rendered in Pure Browser and two additional HTML Readers. It is not what I’m looking for. The entire row needs to fill. If the error is in my coding I would appreciate your pointing it out to me preferably by line number. semicodin STYLE_ONE_ROW_IN_AN_nth_child.html Link to comment Share on other sites More sharing options...
semicodin Posted March 28, 2022 Author Share Posted March 28, 2022 Well folks, I found the following on W3.ORG’s site and I’m going to do some experimenting. I hate math! but I'll soldier on and post the results if I can get a working Lo Fi version of The Little Monster . . . https://www.w3.org/Style/Examples/007/evenodd.en.html semicodin Link to comment Share on other sites More sharing options...
Ingolme Posted March 28, 2022 Share Posted March 28, 2022 7 hours ago, semicodin said: I’m attaching both my code and a screenshot. The attached screenshot was rendered in Pure Browser and two additional HTML Readers. It is not what I’m looking for. The entire row needs to fill. If the error is in my coding I would appreciate your pointing it out to me preferably by line number. semicodin STYLE_ONE_ROW_IN_AN_nth_child.html 2.28 kB · 0 downloads It looks like you have set the cell to be 80% the width of the table in this line of code: transform: scaleX(0.80); This means that the 20% of space on the right won't be colored. Link to comment Share on other sites More sharing options...
semicodin Posted March 28, 2022 Author Share Posted March 28, 2022 That’s the code to condense the font and it’s very important! Are you saying they won't play nicely together? Meanwhile, I attempted the attached . . . Nope. THE_IMPORTANT!_ HACK_nth_child.html Link to comment Share on other sites More sharing options...
semicodin Posted March 28, 2022 Author Share Posted March 28, 2022 (edited) Well I got this to work but I am distinctly unhappy with the hack I used — placing almost the entire style INLINE — because if I remove the style SANS it breaks. Please note: I've rendered the row in YELLOW in keeping with the lo fi goal of making it easy for others to adapt to their needs. I can't imagine this working for someone using the code never before having interacted with SANS in some way: In other words, I consider this hack to be too volatile even for my less-than-pure ahem standards. PLEASE TEST THIS SOMEONE? Does the YELLOW background flood the entire width of the row? Working_nth_child_Hack.html Edited March 28, 2022 by semicodin Link to comment Share on other sites More sharing options...
Ingolme Posted March 28, 2022 Share Posted March 28, 2022 I'm not entirely sure what your goal is anymore. I've simplified your code and made the highlighted row have a different background as well as condensed font. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>SCHOOLS’s Styling nth child Table Rows</title> <style> body { margin-left: 50px; margin-right: 50px; text-align: center; background: #FFFFF5; font-family: 'lucida console', 'courier new', fixed-pitch, monospace; font-size: 24px; line-height: 26px; font-weight: bold; color: black; } table { margin-left: 0px; margin-right: 50px; padding: 20px; text-align: left; border-collapse: collapse; font-size: 20px; line-height: 22px; } /* SETTING THE COLUMN FONT COLORS */ td:nth-child(1) { color: #00FFFF; width: 20%; } td:nth-child(2) { color: BLUE; width: 20%; } td:nth-child(3) { color: #FF00FF; width: 60%; } /* SETTING THE ROW STRIPING */ tr:nth-child( odd ) { background-color: black; } tr:nth-child( even ) { background-color: black; } .sans { color: BLACK; background-color: yellow; text-align: center; font-size: 24px; line-height: 26px; font-weight: bold; font-family: 'helvetica', 'robotocondensed-regular', sans-serif; } .sans span { display: block; transform-origin: 50% 50%; transform: scaleX(0.80); } </style> </head> <body> <table> <tbody> <tr> <td>COL1’S STANDARD MONOSPACE</td> <td>COL2’S STANDARD MONOSPACE</td> <td>COL3’S STANDARD MONOSPACE</td> </tr> <tr> <td>COL1’S STANDARD MONOSPACE</td> <td>COL2’S STANDARD MONOSPACE</td> <td>COL3’S STANDARD MONOSPACE</td> </tr> <tr> <td colspan="3" class="sans"> <span>▶▶▶▶▶THIS ROW’S STYLING SHOULD CHANGE HERE</span> </td> </tr> <tr> <td>COL1’S STANDARD MONOSPACE</td> <td>COL2’S STANDARD MONOSPACE</td> <td>COL3’S STANDARD MONOSPACE</td> </tr> <tr> <td>COL1’S STANDARD MONOSPACE</td> <td>COL2’S STANDARD MONOSPACE</td> <td>COL3’S STANDARD MONOSPACE</td> </tr> <tr> <td>COL1’S STANDARD MONOSPACE</td> <td>COL2’S STANDARD MONOSPACE</td> <td>COL3’S STANDARD MONOSPACE</td> </tr> </tbody> </table> </body> </html> 1 Link to comment Share on other sites More sharing options...
semicodin Posted March 28, 2022 Author Share Posted March 28, 2022 Ahhhh. It works. I can’t thank you enough Ingolme. Sent you some Trophy Love . . . 😊 Link to comment Share on other sites More sharing options...
semicodin Posted March 28, 2022 Author Share Posted March 28, 2022 (edited) Ingolme . . . I’m not sure why the font color isn’t respecting the style. Does it show up in CYAN to you as it does me? I was scrupulous in copying your code. Oh and thank you for correcting my punctuation in the title! Edited March 28, 2022 by semicodin Link to comment Share on other sites More sharing options...
Ingolme Posted March 28, 2022 Share Posted March 28, 2022 It is cyan for me. The nth-child(1) selector is doing it. You can fix it by adding this to your CSS: .sans:nth-child(1) { color: black; } 1 Link to comment Share on other sites More sharing options...
semicodin Posted March 28, 2022 Author Share Posted March 28, 2022 It is still CYAN for me. 🙄 Link to comment Share on other sites More sharing options...
Ingolme Posted March 28, 2022 Share Posted March 28, 2022 Because of CSS precedence rules ( https://www.w3schools.com/css/css_specificity.asp ) that code has to be at the very end of your CSS code. Right before the closing </style> tag. 1 Link to comment Share on other sites More sharing options...
semicodin Posted March 28, 2022 Author Share Posted March 28, 2022 I’m sorry Ingolme, it is still CYAN (although I thank you for explaining that the order of the CSS properties has inheritable precedence!). Yikes. 🙄 Link to comment Share on other sites More sharing options...
Ingolme Posted March 28, 2022 Share Posted March 28, 2022 Here's the full document with the new code added: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>SCHOOLS’s Styling nth child Table Rows</title> <style> body { margin-left: 50px; margin-right: 50px; text-align: center; background: #FFFFF5; font-family: 'lucida console', 'courier new', fixed-pitch, monospace; font-size: 24px; line-height: 26px; font-weight: bold; color: black; } table { margin-left: 0px; margin-right: 50px; padding: 20px; text-align: left; border-collapse: collapse; font-size: 20px; line-height: 22px; } /* SETTING THE COLUMN FONT COLORS */ td:nth-child(1) { color: #00FFFF; width: 20%; } td:nth-child(2) { color: BLUE; width: 20%; } td:nth-child(3) { color: #FF00FF; width: 60%; } /* SETTING THE ROW STRIPING */ tr:nth-child( odd ) { background-color: black; } tr:nth-child( even ) { background-color: black; } .sans { color: BLACK; background-color: yellow; text-align: center; font-size: 24px; line-height: 26px; font-weight: bold; font-family: 'helvetica', 'robotocondensed-regular', sans-serif; } .sans span { display: block; transform-origin: 50% 50%; transform: scaleX(0.80); } .sans:nth-child(1) { color: black; } </style> </head> <body> <table> <tbody> <tr> <td>COL1’S STANDARD MONOSPACE</td> <td>COL2’S STANDARD MONOSPACE</td> <td>COL3’S STANDARD MONOSPACE</td> </tr> <tr> <td>COL1’S STANDARD MONOSPACE</td> <td>COL2’S STANDARD MONOSPACE</td> <td>COL3’S STANDARD MONOSPACE</td> </tr> <tr> <td colspan="3" class="sans"> <span>▶▶▶▶▶THIS ROW’S STYLING SHOULD CHANGE HERE</span> </td> </tr> <tr> <td>COL1’S STANDARD MONOSPACE</td> <td>COL2’S STANDARD MONOSPACE</td> <td>COL3’S STANDARD MONOSPACE</td> </tr> <tr> <td>COL1’S STANDARD MONOSPACE</td> <td>COL2’S STANDARD MONOSPACE</td> <td>COL3’S STANDARD MONOSPACE</td> </tr> <tr> <td>COL1’S STANDARD MONOSPACE</td> <td>COL2’S STANDARD MONOSPACE</td> <td>COL3’S STANDARD MONOSPACE</td> </tr> </tbody> </table> </body> </html> 1 Link to comment Share on other sites More sharing options...
semicodin Posted March 28, 2022 Author Share Posted March 28, 2022 WHAT. A. DRAMA. Thank you for hanging in there with me Ingolme, there is no way I could have sussed this out on my own. No way. If I could give you 5 more trophies it wouldn’t be enough. You’ve been one epiphany after another for this old Writer. I’m giving you your own folder on my SD card (high praise from me indeed lol). The only thing in your code I altered (beside correcting line 53) is the order of the “transform ~~” lines – and that, because I have to SEE THAT scaleX(0.80); FIRST or I will go mad. It doesn’t break the code and for that small mercy I'll be in the bar heh. semicodin Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now