Jump to content

nth child styling


semicodin

Recommended Posts

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 by semicodin
Link to comment
Share on other sites

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

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 by semicodin
Link to comment
Share on other sites

<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">&#9654;&#9654;&#9654;&#9654;&#9654;THIS ROW&rsquo;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

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 by semicodin
Link to comment
Share on other sites

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

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

Screenshot_semicodin.png

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

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 by semicodin
Link to comment
Share on other sites

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&rsquo;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&rsquo;S STANDARD MONOSPACE</td>
      <td>COL2&rsquo;S STANDARD MONOSPACE</td>
      <td>COL3&rsquo;S STANDARD MONOSPACE</td>
    </tr>

    <tr>
      <td>COL1&rsquo;S STANDARD MONOSPACE</td>
      <td>COL2&rsquo;S STANDARD MONOSPACE</td>
      <td>COL3&rsquo;S STANDARD MONOSPACE</td>
    </tr>

    <tr>
      <td colspan="3" class="sans">
        <span>&#9654;&#9654;&#9654;&#9654;&#9654;THIS ROW&rsquo;S STYLING SHOULD CHANGE HERE</span>
      </td>
    </tr>

    <tr>
      <td>COL1&rsquo;S STANDARD MONOSPACE</td>
      <td>COL2&rsquo;S STANDARD MONOSPACE</td>
      <td>COL3&rsquo;S STANDARD MONOSPACE</td>
    </tr>

    <tr>
      <td>COL1&rsquo;S STANDARD MONOSPACE</td>
      <td>COL2&rsquo;S STANDARD MONOSPACE</td>
      <td>COL3&rsquo;S STANDARD MONOSPACE</td>
    </tr>

    <tr>
      <td>COL1&rsquo;S STANDARD MONOSPACE</td>
      <td>COL2&rsquo;S STANDARD MONOSPACE</td>
      <td>COL3&rsquo;S STANDARD MONOSPACE</td>
    </tr>

  </tbody>
</table>

</body>
</html>

 

  • Thanks 1
Link to comment
Share on other sites

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 by semicodin
Link to comment
Share on other sites

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;
}

 

  • Thanks 1
Link to comment
Share on other sites

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&rsquo;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&rsquo;S STANDARD MONOSPACE</td>
      <td>COL2&rsquo;S STANDARD MONOSPACE</td>
      <td>COL3&rsquo;S STANDARD MONOSPACE</td>
    </tr>

    <tr>
      <td>COL1&rsquo;S STANDARD MONOSPACE</td>
      <td>COL2&rsquo;S STANDARD MONOSPACE</td>
      <td>COL3&rsquo;S STANDARD MONOSPACE</td>
    </tr>

    <tr>
      <td colspan="3" class="sans">
        <span>&#9654;&#9654;&#9654;&#9654;&#9654;THIS ROW&rsquo;S STYLING SHOULD CHANGE HERE</span>
      </td>
    </tr>

    <tr>
      <td>COL1&rsquo;S STANDARD MONOSPACE</td>
      <td>COL2&rsquo;S STANDARD MONOSPACE</td>
      <td>COL3&rsquo;S STANDARD MONOSPACE</td>
    </tr>

    <tr>
      <td>COL1&rsquo;S STANDARD MONOSPACE</td>
      <td>COL2&rsquo;S STANDARD MONOSPACE</td>
      <td>COL3&rsquo;S STANDARD MONOSPACE</td>
    </tr>

    <tr>
      <td>COL1&rsquo;S STANDARD MONOSPACE</td>
      <td>COL2&rsquo;S STANDARD MONOSPACE</td>
      <td>COL3&rsquo;S STANDARD MONOSPACE</td>
    </tr>

  </tbody>
</table>

</body>
</html>

 

  • Thanks 1
Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...