When I use .table1901 tr td:first-child + td etc it styles more than one column Why

I though I had grasped how this worked but obviously not because two columns are being centred.

The web page is www.c5d.co.uk/1901.php

The CSS is .

table1901 tr td:first-child + td + td + td + td + td + td + td + td + td + td + td + td { text-align:center; }

as I wish to center the text in column 13. (headed 12 on the web page) Why then should it also style column 18 (headed 17) ?

When I check with Chrome it tells me that line 149 (the one above) is operating on both columns, but I don’t know why. I want column 18 to align left. It’s the last column.

I tried to use table1901 tr td:last-child { text-align:left; } (as it is the last column) but the column is not taking this according to chrome.

Antony

Hi,

You didn’t take into account colspan so the 12th item in each row refers to a different column.


<tr>
				<td>
				<td>
				<td>
				<td>
				<td>
				<td>
				<td>
				<td colspan="2">
				<td>
				<td>
				<td>
				<td>
				<td>
				<td>
				<td>
				<td>
				<td>
		</tr>
		<tr>
				<td rowspan="3">
				<td rowspan="3">
				<td colspan="4">
				<td rowspan="3">
				<td colspan="2" rowspan="3">
				<td rowspan="3">
				<td rowspan="3">
				<td rowspan="2" colspan="2">
				<td rowspan="3">
				<td rowspan="3">
				<td rowspan="3">
				<td rowspan="3">
				<td rowspan="3">
		</tr>



table1901 tr td:first-child + td + td + td + td + td + td + td + td + td + td + td + td { text-align:center; } 

That sort of code is unmanageable and unmaintainable in real life. Just add a class to the column concerned.:slight_smile:

I tried to use table1901 tr td:last-child { text-align:left; } (as it is the last column) but the column is not taking this according to chrome.

Because the specificity of your incredibly long selector has more weight. That’s another reason why that sort of code is only useful in demos. You would have needed to add !important to the rule or add another 12 selectors to it.

Thanks for your message.

I know I’m the learner and you’re the expert but might I disagree ? please ?

There are 12 + td, after the first child, so it seems to me as if I have done it correctly. It’s the thirteenth column.

Additionally, this code works fine in my other web pages. See c5d.co.uk/1891.php or c5d.co.uk/1871.php

The question is why should this style affect two columns as indicated by the chrome CSS checker. ? ie col 13 and col 18

I did try adding important but it has not had any effect. I also tried to specifically align that column to the left but again the CSS is not being applied to the column.

Thanks

Antony

Hi Anthony,

Yes but the first row has 13 tds in it and the next row has 17 tds but in both you have selected the 13th element in both rows. Unless I’m misunderstanding what you are asking but it looks pretty straight forward to me. See the html I posted which was from your page and shows the different number of elements in each row. You have simply chosen whatever is the 13th element in both those rows.

The question is why should this style affect two columns as indicated by the chrome CSS checker. ? ie col 13 and col 18

Because they are the 13th items in those rows. They are not corresponding items because of the colspan I mentioned.

I did try adding important but it has not had any effect. I also tried to specifically align that column to the left but again the CSS is not being applied to the column.

It works for me:

.table1901 tr td:last-child {text-align:left!important}

However you also have some rows with only 4 tds in place so the last-child of those row items will be styled as well as the last column of the whole table.

The rules is hitting two columns there also. Just add a red background to your rule and you will see.



.table1861 tr td:first-child + td + td + td + td + td + td + td + td + td {
    background: red;
    text-align: center;
}

I think that I get what you are trying to tell me.

This is the 18th column in the table, but because the phrase HOUSES is colspan-ed over 4 columns and the name and surname over the the system thinks it’s the 13th column.

I have got the imprtant to work now

Thanks

Yes all the css does is count how many items. It doesn’t know that some items are grouped with colspan etc it just looks for a sequence of tds.:slight_smile:

In response to a PM from Antony about this page,

Antony, DELETE the class “pagenumber” from the CSS. In the HTML, the class should be “oddpagenumber” or “evenpagenumber” per the code that I gave you. Put the text and the span within <p> tags inside that <td>. It does not matter whether the classname is in the <tr> tag (as shown in my example code) or in this <td> tag. What matters is that the styles target the <p> tag.


<td class="[color=red]pagenumber[/color]" colspan="5">


.evenpagenumber p,
.oddpagenumber p {
    position:relative;  /* provides the context for the absolutely positioned page numbers. */
    text-align:center;  /* center-aligns the p text */
    padding:0 8em;  /* This reserves space for the page numbers at the ends of the paragraph.  Possibly needed IF the p text becomes wider or the table becomes narrower.  It is not necessary here at this time. */
    margin:0;  /* Removes the default top and bottom margins from the paragraph. */
}
.evenpagenumber span {
    position:absolute;
    left:0;   /* position the even page number against the left edge of the paragraph */
    margin-left:1em;  /* add left margin to the page number inside the left edge of the paragraph */
}
.oddpagenumber span {
    position:absolute;
    right:0;   /* position the odd page number against the right edge of the paragraph */
    margin-right:1em;  /* add right margin to the page number inside the right edge of the paragraph */
}

If you wish to apply the classname to the <p> tag, then delete the “p” from the CSS selector, like this:


.evenpagenumber,
.oddpagenumber {
    position:relative;  /* provides the context for the absolutely positioned page numbers. */
    text-align:center;  /* center-aligns the p text */
    padding:0 8em;  /* This reserves space for the page numbers at the ends of the paragraph.  Possibly needed IF the p text becomes wider or the table becomes narrower.  It is not necessary here at this time. */
    margin:0;  /* Removes the default top and bottom margins from the paragraph. */
}
.evenpagenumber span {
    position:absolute;
    left:0;   /* position the even page number against the left edge of the paragraph */
    margin-left:1em;  /* add left margin to the page number inside the left edge of the paragraph */
}
.oddpagenumber span {
    position:absolute;
    right:0;   /* position the odd page number against the right edge of the paragraph */
    margin-right:1em;  /* add right margin to the page number inside the right edge of the paragraph */
}

This code should be usable in all tables without modification.

Semi-related:

Does this image of the Totals cell look useful to you? The brace will not collapse against the text. If you are interested, then you need to choose between whether the brace should hug the text or hug the right edge of the cell as shown in the last two rows.

Thanks for this, but unless it’s me we seem to be at cross purposes here.

This thread is for the 1901 census. www.c5d.co.uk/1901.php with the stylesheet www.c5d.co.uk/census1901.css.

In the 1901 census, all the page numbers are on the right hand side and so the two classes for left and right appear unnecessary.

I have not done anything with 1891 which is the one with page numbers on both left and right depending on whether this was an odd or even number.

Am I going awry ?

Antony

Your thinking is clear. I was unaware that the page numbers on the 1901 page would not be staggered and that your PM was about the 1891 page only. There were/are mistakes in the 1901 CSS and HTML so I thought you were referring to 1901.

Nevertheless, I would ask you to think about efficiency of code this year and error prevention next year or thereafter.

The same CSS will work in any table without modification (as far as I know). It could be placed in a common CSS file that serves all of the tables. Even if that is not done, it is much easier to avoid a mistake if the same code can be utilized to style the HTML of all pages where needed instead of discreet code. That is the efficiency of CSS.

Why reinvent the wheel when you have one version that will work everywhere? Perhaps instead of naming the classes “oddpagenumber” and “evenpagenumber” you might consider “leftpagenumber” and “rightpagenumber”. That would be more universal.

On the other hand, if you want the text on the 1901 page to be offset from center, then a different style might indeed be appropriate.

I heard you when you mentioned that you don’t have a good understanding of positioned objects. This is a simple and very effective use of them. ALSO, that image in the previous post that shows the compactly arranged text, depends on basically the same technique. It’s a useful thing to learn if you have the time.

Point taken about one universal style sheet, but at present the one I have is so mixed up with styles for of the different censuses, and the other parts of this sit.

What my intention is, is to get a separate sheet for each census, then, I can amalgamate them all with all the census specific styles next to each other rather than scattered here there and everywhere throughout.

I think this way will be easier for me.

Would you be kind enough to have a look at another problem for me.

www.c5d.co.uk/kimmeridge1911.php There are 3 validation errors according to the Chrome verifier. It would appear to be with the fact that a table row has no information in it.

Line 257, column 29: Table columns in range 3…4 established by element td have no cells beginning in them.
Line 257, column 29: Table columns in range 9…11 established by element td have no cells beginning in them.
Line 257, column 29: Table columns in range 13…16 established by element td have no cells beginning in them.

What I want is just a row across with no borders showing

However there are two rows exactly the same. The one where an error is specified and another a few rows below.

Kind regards

Antony

You asked about the table at line 257 on this page, www.c5d.co.uk/kimmeridge1911.php.

I am attaching a fun page for you to play with. Well, it was fun for me, anyway.

The table contains 10 columns and 6 rows and validates as requested; but that’s not the fun part.

It colors the columns and rows (separately) so you can see how the cells are laid out.

FYI, I changed the way the outlines are assigned to the “td” tags. Easier and usable in any table. Sorry.

Copy to a local file and open in your favorite browser. Afterward, you can copy and paste the useful parts (the table and the few lines of CSS) and trash the rest.


<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="http://www.c5d.co.uk/census1911.css" type="text/css" media="screen">
    <title>1911 stats table</title>
<!--
http://www.sitepoint.com/forums/showthread.php?1186223-When-I-use-table1901-tr-td-first-child-td-etc-it-styles-more-than-one-column-Why
Jan 9, 2014, 11:10
certificates

This table has 10 columns and 6 rows.
See lines 49 and 88 for demo instructions.
For real use:
1. Copy CSS lines 20-39 to you style sheet, and
2. the table from lines 126-177 to your HTML page.
-->
    <style type="text/css">
/* THESE FEW LINES are all that are needed on your stylesheet */

.table1911stats {border-collapse:collapse;}
.table1911stats .nb {border-bottom:0 none;}
.table1911stats .nt {border-top:0 none;}
.table1911stats .nl {border-left:0 none;}
.table1911stats .nr {border-right:0 none;}

/* This provides the wide text underline feature, if you are interested.
   To implement, add the classname to the "tr", "td", "p", or "span" tag.
   See the side-by-side example in col7, "Number of Rooms". (Pick a shorter classname if desired.)
   Can you tell from this example 2 different ways to target a particular tag? */
.wideunderline span,
span.wideunderline {
    display:inline-block;
    line-height:1;
    text-align:center;
    border-bottom:1px solid #000;
    padding:0 1.5em;
}

/* END of FEW LINES */


/* The following CSS is for the demos and CAN BE DELETED when you're finished. */

.legends {
    display:table;
    position:fixed;
    left:0;
    right:0;
    margin:1em auto 0;
}

/* To SHOW the COLUMN colors, delete the open-comment mark on the next line... */
/*
.col1 {background-color:#ffc;}
.col2 {background-color:#fcf;}
.col3 {background-color:#fcc;}
.col4 {background-color:#ccf;}
.col5 {background-color:#ccc;}
.col6 {background-color:#ffc;}
.col7 {background-color:#cff;}
.col8 {background-color:#ffc;}
.col9 {background-color:#cfc;}
.col10 {background-color:#ffc;}
/* */
.legendCols {
    display:inline-table;
}
.legendCols th {
    color:#456;
    font-size:2em;
    border:0 none;
}
.legendCols td {
    padding:2px 8px;
}
.legendCols .col1 {background-color:#ffc;}
.legendCols .col2 {background-color:#fcf;}
.legendCols .col3 {background-color:#fcc;}
.legendCols .col4 {background-color:#ccf;}
.legendCols .col5 {background-color:#ccc;}
.legendCols .col6 {background-color:#ffc;}
.legendCols .col7 {background-color:#cff;}
.legendCols .col8 {background-color:#ffc;}
.legendCols .col9 {background-color:#cfc;}
.legendCols .col10 {background-color:#ffc;}

.legendCols span {
    color:#00f;
}

/* To SHOW the ROW colors, delete the open-comment mark on the next line
   (these styles override the column colors)... */
/*
.table1911stats tr:nth-child(1) td {background-color:#f88;}
.table1911stats tr:nth-child(2) td {background-color:#8f8;}
.table1911stats tr:nth-child(3) td {background-color:#88f;}
.table1911stats tr:nth-child(4) td {background-color:#ff8;}
.table1911stats tr:nth-child(5) td {background-color:#f8f;}
.table1911stats tr:nth-child(6) td {background-color:#8ff;}
/* */
.legendRows .row1 td {background-color:#f88;}
.legendRows .row2 td {background-color:#8f8;}
.legendRows .row3 td {background-color:#88f;}
.legendRows .row4 td {background-color:#ff8;}
.legendRows .row5 td {background-color:#f8f;}
.legendRows .row6 td {background-color:#8ff;}

.legendRows {
    display:inline-table;
}
.legendRows th {
    color:#456;
    font-size:2em;
    border:0 none;
}
.legendRows td {
    padding:2px 8px;
}

    </style>
</head>
<body>

<table class="table1911stats">
<tr>
    <td class="col1 nb nr"></td>
    <td class="col2 nb nr nl" colspan="4"></td>
    <td class="col6 nb nr nl"></td>
    <td class="col7 nb nr nl"></td>
    <td class="col8 nb nr nl"></td>
    <td class="col9 nb nr nl"></td>
    <td class="col10 nb nl"></td>
</tr>
<tr>
    <td class="col1 nt nb nr" rowspan="4"></td>
    <td class="col2 nt nr nb nl" colspan="4">&#40;To be filled up by the Enumerator&#41;</td>
    <td class="col6 nt nr nb nl" rowspan="4"></td>
    <td class="col7 nt nr nb nl">&#40; To be filled up by&#44; or on behalf of&#44; the Head of Family or other person in occupation&#44; or in charge&#44; of this dwelling&#46;</td>
    <td class="col8 nt nr nb nl" rowspan="4"></td>
    <td class="col9 nt nr nb nl"></td>
    <td class="col10 nt nb nl" rowspan="4"></td>
</tr>
<tr>
    <td class="col2" rowspan="3">I certifiy that&#58;&mdash;<br>
        &#40;1&#46;&#41; All the ages of this Schedule are entered in the proper sex columns&#46;<br>
        &#40;2&#46;&#41; I have counted the males and females in Column 3 and 4 separately&#44;<br><p class="padding"> and have compared their sum with the total number of persons&#46;</p>
        &#40;3&#46;&#41; After making the necessary enquiries I have completed all the entries on<br><p class="padding">the Schedule which appeared to be defective&#44; and have corrected</p><p class="padding">such as appeared to be erroneous&#46;</p>
        <p class="ifonly">Initials of Enumerator &nbsp; &nbsp; &nbsp; G&#46;E&#46;B &nbsp; &nbsp; &nbsp;</p></td>
    <td class="col3 ifonly" colspan="3">Totals</td>
    <td class="col7" rowspan="3">Write below the Number of Rooms in this<br>Dwelling &#40;House&#44; Tenement or Apartment&#41;&#46;
        <br>Count the kitchen as a room but do not count<br>scullery&#44;  landing&#44; lobby&#44; closet&#44; bathroom&#59;<br>nor warehouse&#44; office&#44; shop&#46;<br><p class="residents">&nbsp; &nbsp; &nbsp; 5 &nbsp; &nbsp; &nbsp;</p><p class="residents"><span class="wideunderline">5</span></p></td>
    <td class="col9 nb">I declare this Schedule is correctly filled up to the best of my knowledge and belief&#46;</td>
</tr>
<tr>
    <td class="col3 ifonly">Males</td>
    <td class="col4 ifonly">Females</td>
    <td class="col5 ifonly">Persons</td>
    <td class="col9 nt nb"><p class="paddingtop">Signature<span class="residents">&nbsp; &nbsp; &nbsp; C Vincent &nbsp; &nbsp; &nbsp;</span></p></td>
</tr>
<tr>
    <td class="col3"><p class="ntrlc">2</p></td>
    <td class="col4"><p class="ntrlc">2</p></td>
    <td class="col5"><p class="statscenter">4</p></td>
    <td class="col9 nt">Postal Address<p class="residents">&nbsp; &nbsp; &nbsp; Kimmeridge &nbsp; &nbsp; &nbsp;</p></td>
</tr>
<tr>
    <td class="col1 nt nr"></td>
    <td class="col2 nt nr nl" colspan="4"></td>
    <td class="col6 nt nr nl"></td>
    <td class="col7 nt nr nl"></td>
    <td class="col8 nt nr nl"></td>
    <td class="col9 nt nr nl"></td>
    <td class="col10 nt nl"></td>
</tr>
</table>


<!-- THE REST OF THIS IS DEMO STUFF -->
<div class="legends">
    <table class="legendCols">
    <tr><th colspan="2">Legends &nbsp; - Columns</th></tr>
    <tr class="col1"><td>Column 1</td><td>The 4 spacer columns are colored yellow</td></tr>
    <tr class="col2"><td>Column 2</td><td></td></tr>
    <tr class="col3"><td>Column 3</td><td></td></tr>
    <tr class="col4"><td>Column 4</td><td></td></tr>
    <tr class="col5"><td>Column 5</td><td></td></tr>
    <tr class="col6"><td>Column 6</td><td>The 4 spacer columns are colored yellow</td></tr>
    <tr class="col7"><td>Column 7</td><td></td></tr>
    <tr class="col8"><td><span>Column 8</span></td><td>To delete this spacer column, just delete the 3 <span><td class="col8"></span> cells</td></tr>
    <tr class="col9"><td>Column 9</td><td></td></tr>
    <tr class="col10"><td>Column 10</td><td>If you delete the <span>.col8</span> spacer column, you might want to renumber cols 9 &amp; 10.</td></tr>
    </table>
    <table class="legendRows">
    <tr><th colspan="2">- Rows</th></tr>
    <tr class="row1"><td>Row 1</td></tr>
    <tr class="row2"><td>Row 2</td></tr>
    <tr class="row3"><td>Row 3</td></tr>
    <tr class="row4"><td>Row 4</td></tr>
    <tr class="row5"><td>Row 5</td></tr>
    <tr class="row6"><td>Row 6</td></tr>
    </table>
</div>

</body>
</html>

Cheers

Thanks very much for this.

I though I would try and finish this off before adjusting it via the revised thing you have done. I am off work tomorrow for a day and will play about with that then.

I have done it and whilst the page looks fine, I guess the CSS could e improved.

Thanks for the help

Antony