CSS Order / preference confusion 2

[SunnyByfleet]

Here's a simple code snippet:

<style>
.class1 td
{
	text-align:  right;
}

.class2 
{
	text-align:  left;
}
</style>

<div class = "class1">
<table border = "1">
<tr>
<td>Yada yada yada</td>
<td>Yada yada yada</td>
</tr>
<tr>
<td class = "class2">L Yada</td>
<td>R Yada</td>
</tr>
</table></div>

I would expect on running that, that L Yada would be left aligned, having picked up its style from class2, whereas R Yada would be right aligned, having picked up its style from class1.

However, when I run it, everything is right aligned.

I must be missing something fundamental here, but I can't see what it is.

Basically, I want to have a general style, in class1, but have extra bits where necessary for individual cells.

Any ideas?

 

[SunnyByfleet]

Well I've found one solution:

<style>
.class1 td
{
	text-align:  right;
}

.class2 td
{
	text-align:  left;
}
</style>

<div class = "class1">
<table border = "1">
<tr>
<td>Yada yada yada</td>
<td>Yada yada yada</td>
</tr>
<tr>
<span class="class2"><td>L Yada</td></span>
<td>R Yada</td>
</tr>
</table>
</div>

Basically, in my first example, class1 was more specific than class2, as it targetted td whereas class2 was more general.

According to W3G's own documentation on the cascade:

Sort rules with the same importance and origin by specificity of selector: more specific selectors will override more general ones. Pseudo-elements and pseudo-classes are counted as normal elements and classes, respectively.

-+-+-+-

I don't know why though, but it feels like a bodge.

 

[Vragabond]

Ouch, your solution employs erroneous html. Please don't do that. Read up on specificity (in a more fun and less dry way) here:

http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

And fix your css by doing this (this way your original HTML does not have to change).

.class1 td
{
    text-align:  right;
}

.class1 .class2
{
    text-align:  left;
}

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[SunnyByfleet]

Ah, the penny has dropped. Thanks. I agree my solution was painful. It hurt even to type it!

 

[SunnyByfleet]

It turns out that there was another twist to the tale.

The problem was that the table was going to be generated by PHP and would not necessarily be aware of any parent classes. This would make the CSS impossible, as you wouldn't be able to specify an unknown parent.

The solution was to wrap the table up in another class DIV, specific to that table. That way I can now plonk the table wherever I want without fear of intimidation, so to speak.

The final code looked like this. I only include it in case it helps anybody else.

<style>
.randomclass td
{
	color: blue;
}

.myredtablewrapper td
{
	color: red;
}

.myredtablewrapper .mygreencell
{
	color: green;
}


</style>
<!-- 
The class randomclass represents whatever the web page would be 
displaying prior to addition of the table... 
-->
<div class = "randomclass">

<!-- Now we will insert our table... -->


<div class = "myredtablewrapper">
<table border = "1">
<tr>
<td>Yada yada yada</td>
<td>Yada yada yada</td>
</tr>
<tr>
<td class = "mygreencell">Green Yada</td></span>
<td>Red Yada</td>
</tr>
</table>
</div>

</div>

 

[ChrisHunt]

The problem was that the table was going to be generated by PHP and would not necessarily be aware of any parent classes. This would make the CSS impossible, as you wouldn't be able to specify an unknown parent.

The PHP doesn't have to be "aware" of anything for the CSS to work. Here's what happens:
[ul]
[li]Your browser requests a particular URL.[/li]
[li]The web server builds the page living at that address. This might be a simple, static HTML page, it might be something more complex involving SSI, bits of perl or php, heaven knows what. The end result is a load of HTML [/li]
[li]This HTML is sent back to the browser, you can see it if you do a "View Source". Note that you won't see any php commands there, just the HTML code that they generate.[/li]
[li]Having got a page of HTML, the browser will pull in any CSS stylesheet(s) that are referenced and apply their styles to the elements on the page.[/li]
[li]The page might run javascript (within the browser) to create more elements locally, these will be styled according to the stylesheet too.[/li]
[/ul]
The bottom line is - what happens on the server stays on the server. Your browser doesn't give a flying farkle which bits came from php and which didn't - they all look like HTML by the time they get that far.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[SunnyByfleet]

No, you miss my point. Without the DIV table wrapper I introduced, the CSS couldn't accomodate the code generated, because other divs might be present. The server - client bit is not relevent. The same would apply if you just had an HTML file and copied a block of text into it.

 

[ChrisHunt]

If you mean that you couldn't identify the table because you don't know what div(s) it's in, why not just give the table a class?

<table class="myredtable" border = "1">
<tr>
<td>Yada yada yada</td>
<td>Yada yada yada</td>
</tr>
<tr>
<td class = "mygreencell">Green Yada</td>
<td>Red Yada</td>
</tr>
</table>

Then you can do this

.randomclass td
{
    color: blue;
}

.myredtable td
{
    color: red;
}

.myredtable .mygreencell
{
    color: green;
}

There's no need to add an extra <div>, though admittedly there's no great harm in doing so either.

I just think it makes more sense, if you want to change the behaviour of a particular table, to apply a class to the table rather than adding a wrapper.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[SunnyByfleet]

Hmmmm, now why didn't I think of that in the first place?

I will give it a go. Ta

That the trouble when you are learning stuff, you can get wrapped up so much in the minutiae that you miss the bigger, more obvious picture.