I’ve come to trust that MDN (most often) has up-to-date support information
Browser compatibility
Desktop
Feature Chrome Firefox (Gecko) IE Opera Safari
Basic support 1.0 3.5 (1.9.1) 9.0 9.5 3.1
Though I often go to the caniuse site too.
1 Like
#Merry Christmas everyone!#
[quote=“Mittineague, post:59, topic:246804, full:true”]
It’s all about having good HTML structure and using the correct selectors and the correct rules. [/quote]
###It’s awesome!###
Mittineague it’s brilliant. I haven’t yet tested special cell but I have no doubt it will work. About the HTML structure you mentioned . . .
This is the first time that I’ve moved style elements (in this particular case your 2 “__of type”) to the top of my CSS, to observe that both were disabled as a result! 
- Do the two “
__of type” elements have a hierarchical relationship within the CSS? - Where can I learn more about why moving them to a different position within the CSS disables them?
- Do they fall into some unique group of CSS elements?
- What is this category called?
At first I thought there might be a conflict with the nth-child elements in my CSS, but that appears to have no effect. Thank you Mittineague this is extremely helpful!
CSS depends not only on the specificity of the selectors but also the order of the rules.
For example, if there is a <span id="foo" class="bar baz" style="font-weight: bold">
The order of specificity is
style attribute > id > class > tag
So, for one example, if there is
.bar {
color: red;
font-weight: normal;
}
.baz {
color: green;
font-weight: normal;
}
the span would be color: green, font-weight: bold
Even if there was
#foo {
color:blue;
font-weight: normal;
}
the span would be color: blue, font-weight: bold
It can get tricky and that’s one reason I try to keep my CSS at a minimum. TBH I don’t know how others can work with CSS running up to hundreds of rules.
I’m really uncomfortable with the whole parent/ child/ /inherited thing and would prefer getting it out of my CSS altogether. Is there no way to make those 2 columns text-align: right; with some other method? I don’t know, like turning the columns into DIVs that I could use text-align: right; with no matter how much my CSS changes? How about a simple Javascript approach? Your thoughts?
#. . . with some other method?#
JavaScript can modify CSS, sure.
But guess what, it uses selectors too!
There’s no getting around it. You need to “home in” on the targets in some way.
Like much of web dev, CSS can be relatively easy to learn, but difficult to master.
These might help
Some things are more work initially (eg. writing 100 class attributes), some things are more fragile (eg. relationship combinators) meaning possibly more work in the future.
2 Likes
hmmmm . . . Target? I’ll play around with that and some more. Thanks again Mittineague. Peace.
Why not just apply classnames to the <td> cells in need? Once that is done ONCE, they will go with the flow when your CSS or HTML changes. How can that possibly be so hard or time consuming? (I’m inviting a practical lesson here, not hysteria.)
I believe that you could have solved the problem 6 times over by now.
Send me the URL to one of the files. I would like to know how hard this would be to class. Seriously.
Merry Holidays.
In Living Color “ILC” was an Emmy-Awarded Comedy series broadcast on FOX in the 1990s that ran for 5 seasons. You don’t merely laugh at ILC, you howl, due in no small measure to the writing. Both Jim Carrey and Jamie Foxx launched their careers on ILC. I’ve been able to find them Used (Very Good, guaranteed playable) on Ebay for $7 a set shipped (!).
The 2 Tidy’d HTML files I’m uploading are in a ZIP that includes a basic TXT description of what this little project of mine hopes to accomplish.
The 1st is the standard with text left aligned.
The 2nd is the file I manually added text-align: right properties to in Dreamweaver.
ILC_TIDIED.ZIP (33.4 KB)
And here is just one of the more interesting results that happen when I attempt adding a .td-R class and applying it
.td-R {
width: 55px;
background-color: #000000;
color: CYAN;
border: 2px RIDGE #888888;
text-align: right;
padding: 8px;}
and
<tr>
<td-R>2</td>
<td>1990-04-21</td>
<td>ONE</td>
<td-R>2</td>
<td>
<ul>
<li>“Do-It-Yourself Milli Vanilli Kit” (cut from DVD)</li>
<li>“Arsenio and Marion Barry”</li>
<li>“Rap Choir”</li>
<li>“Sugar Ray Leonard Transition”</li>
<li>“Star Trek: The Wrath of Farrakhan”</li>
<li>“Ridin’ Miss Daisy”</li>
</ul>
</td>
</tr>
See if you can detect a difference between the two tables. The top one is yours, the bottom one is not.
Copy this working page to a file and open it in your favorite browser. If you’d rather, I’ll add it as a zip file, too.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>template</title>
<!--
https://www.sitepoint.com/community/t/can-i-put-colspan-definitions-in-my-css/246804/71
semicolon
-->
<style type="text/css">
.td-R {
width: 55px;
background-color: #000;
color: CYAN;
border: 2px RIDGE #888;
text-align: right
padding: 8px;
}
</style>
</head>
<body>
<table>
<tr>
<td-R>2</td>
<td>1990-04-21</td>
<td>ONE</td>
<td-R>2</td>
<td>
<ul>
<li>“Do-It-Yourself Milli Vanilli Kit” (cut from DVD)</li>
<li>“Arsenio and Marion Barry”</li>
<li>“Rap Choir”</li>
<li>“Sugar Ray Leonard Transition”</li>
<li>“Star Trek: The Wrath of Farrakhan”</li>
<li>“Ridin’ Miss Daisy”</li>
</ul>
</td>
</tr>
</table>
<table>
<tr>
<td class="td-R">2</td>
<td>1990-04-21</td>
<td>ONE</td>
<td class="td-R">2</td>
<td>
<ul>
<li>“Do-It-Yourself Milli Vanilli Kit” (cut from DVD)</li>
<li>“Arsenio and Marion Barry”</li>
<li>“Rap Choir”</li>
<li>“Sugar Ray Leonard Transition”</li>
<li>“Star Trek: The Wrath of Farrakhan”</li>
<li>“Ridin’ Miss Daisy”</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
2 Likes
Will do RP. But right now I am going to bed!!!
It took about 20 minutes to replace all of the divs with deprecated attributes with classes on the <td>s, then a couple of more hours to indent and error check. Found and fixed 6 HTML errors. The div table spacer near the end of the page is still there as well as several inline-styles sprinkled through the page. The inliners should be replaced by classes on the HTML element and the styles moved to the CSS. I disagree with your casual practice of sometimes using uppercase names for elements or properties. Sometimes case matters. The odds are that the practice will bite you some day.
I only added the one corny classname, “.alright” assigned {text-align:right;}. You might replace it with a more appropriate word. or you might just use nth-child() selectors. I added the CSS for both methods at the bottom of the CSS portion of the page.
ILC_(Manually)_alright.zip (16.7 KB)
The second file looks like a cleaned up copy of the first file. Whatever it is, to the second file I made no changes other than adding the nth-child() selectors to the bottom of the CSS. It seems to work OK. Total time: 3 or 4 minutes.
ILC_LEFT.zip (15.7 KB)
5 Likes
[quote=“Mittineague, post:67, topic:246804, full:true”]
JavaScript can modify CSS, sure.
But guess what, it uses selectors too!
There’s no getting around it. You need to “home in” on the targets in some way. [/quote]
Mittineague I think the thing that impresses me most about your TH: first-of-type and TH: nth-of-type solutions is their sparecity: the CSS does all the heavy lifting, and in little more than 200 characters every column whose text needs to be aligned RIGHT is formatted with staggering efficiency. No classes need to be grafted onto the content. There are cross browser compatibility issues apparently, but really that’s nothing (there are always cross-browser issues).
Because I’m right-brained I need the freedom of writing and organizing my HTML in a way that personalizes it enough for me to feel comfortable working with it. It’s why my style of coding is by now so universally loathed that I TIDY everything before posting it, grateful that anyone is patient enough to hang in there with someone as eccentric as me!
It’s hard enough for me to look at HTML — even in a commercial editor such as Dreamweaver — without the anxiety imposed by a hierarchical restriction so narrow that an action as benign as moving a few lines of code disables the feature. I’d have to monitor it. I’d have to keep track of it. 
I get a headache just thinking about it!
I wanted to acknowledge your gracious comments Mittineague. Thank you. I’m not throwing the option away, but for now I need the stability of Ronpat’s reliable old
##classes . . .##
Those cross browser compatibility issues you are talking about: There are at least 97.97% of the browsers that can use the “nth-child” selector the way you have been recommended in this thread, I can’t see where the problem is really, your question are solved already so please accept that your sources that said it couldn’t be done was outdated by nine yesrs.
What yet is to see is if you can implement it. If you need further guidence regarding using the advices here you are welcome to ask.
1 Like
You’ll be pleased to know RP I get it. You’ve been urging me to Use your CLASS members (or words to that effect) and I couldn’t grasp what you were talking about. I have defined the CLASS —
.td-R {
width: 55px;
background-color: #000000;
color: CYAN;
border: 2px RIDGE #888888;
direction: rtl;
padding: 8px;}
— and I have put them where they belong, see?
<tr>
<td-R>1</td>
<td>1990-04-15</td>
<td>ONE</td>
<td-R>1</td>
<td>
Readers, the block of code directly above this sentence is wrong. Here is what it should be:
<tr>
<td CLASS="td-R">1</td>
<td>1990-04-15</td>
<td>ONE</td>
<td CLASS="td-R">1</td>
<td>
I thought I would share the action behind the code, because it’s one thing to know you have to replace hundreds of lines of text, it’s another to do it efficiently . . .
##You will need my##
- HTML file ILC_LEFT.html, in the
- ZIP file I uploaded ILC_LEFT.ZIP, and a
- Text Editor with Regular Expressions (or equivilant w/advanced Search/Replace operations; I use Helios’s TextPad)
Open the ILC_LEFT.html and create the class .td-R as you see it (above). You’re going to perform 3 batch Search/Replace operations In your text editor, as paired below:
ONE</td>\n<td>
..........to
ONE</td>\n<td CLASS="td-R">
</td>:\n:</tr>\n<tr>:\n:<td>
..........to
</td>:\n:</tr>\n<tr>:\n:<td CLASS="td-R">
SKETCHES</th>\n</tr>\n<tr>\n<td>
..........to
SKETCHES</th>\n</tr>\n<tr>\n<td CLASS="td-R">
The experience has been an epiphany for me RP. I’m already thinking about making little templates with this code, it’s as powerful as it is stable and I thank you so much Ronpat. May I ask one question:
Is it possible to create a .td-R class whose purpose is to do one thing — text-align: right; — “on the fly” as it were, even when the columns/cells/rows already have a class?
Example: .GORILLA, .MONKEY and .APE don’t need to be right aligned. But .CHIMP (and some other classes) will need it:
.GORILLA {
width: 55px;
background-color: #000000;
color: CYAN;
border: 2px RIDGE #888888;
padding: 8px;}
MONKEY {
width: 130px;
background-color: #000000;
color: CYAN;
border: 2px RIDGE #888888;
padding: 8px;}
.CHIMP {
width: 70px;
background-color: KHAKI;
color: CYAN;
border: 2px RIDGE #888888;
padding: 8px;}
.APE {
width: 70px;
background-color: #000000;
color: CYAN;
border: 2px RIDGE #888888;
padding: 8px;}
#Possible?#
Yes, that’s exactly what it does in the RIGHT example.
To add additional classes to an element, separate them with a space.
<td class="CHIMP td-R">
The usual rules of specifictiy apply.
I use a text editor called EditPad Pro (a purchased text editor) with regex capability. That’s how I edit everything including your files.
I trust that you’ve seen the two zipped uploads by now?
Where did the tag <td-R> come from? That’s not the same as <td class="td-R">. I don’t think it is valid html. Why does it keep showing up?
1 Like
Hi, @WebMachine.
I think it originated from a misunderstanding of how classes are written.
In post #77, I believe @semicolon was comparing “before” and “after” code corrections so we would know that he “got it”. 
Those are my guesses, anyway.
1 Like