34 replies [Last post]
fxCSS
fxCSS's picture
Offline
Regular
Last seen: 8 years 52 weeks ago
Timezone: GMT-4
Joined: 2010-03-24
Posts: 46
Points: 60

hello,

how would I target the third table (with CSS2) on a page if it has no id or class name to it? The table is generated by asp.net so I cannot name/id it.

For example:

/* want to apply CSS to this table */

let me know if you need additional info to help with this.

thanks

fxCSS
fxCSS's picture
Offline
Regular
Last seen: 8 years 52 weeks ago
Timezone: GMT-4
Joined: 2010-03-24
Posts: 46
Points: 60

**modified to show

**modified to show code**

fxCSS wrote:

hello,

how would I target the third table (with CSS2) on a page if it has no id or class name to it? The table is generated by asp.net so I cannot name/id it.

For example:

<body>
 
<table>
</table>
 
<table>
</table>
 
<table> /* want to apply CSS to this table */ 
</table>
 
<table>
</table>
 
</body>

let me know if you need additional info to help with this.

thanks

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 3 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

You can use jQuery or modify

You can use jQuery or modify the ASP... no way to do it with CSS that I am aware of

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 8 weeks 50 min ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

fxCSS wrote: ... The table is

fxCSS wrote:

... The table is generated by asp.net so I cannot name/id it. ...

Why not?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 23 hours 16 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

:nth-of-type(3)

With CSS3 you can use

table:nth-of-type(3){background:red;}

It's supported by most modern browsers excluding IE http://csscreator.com/content/nth-type

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 3 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Tony wrote: With CSS3 you can

Tony wrote:

With CSS3 you can use

Ya, OP mentioned CSS2, so I am assuming it has to work with IE, which is why I assume there was no other option besides modify the ASP or do it with JS.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 23 hours 16 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Yes, sorry I only see what I

Yes, sorry I only see what I want, sometimes.
so in JavaScript you could do:

var tables = document.getElementsByTagName('table');
tables[2].style.backgroundColor = 'red'; 

or something similar.

jon19870
jon19870's picture
Offline
Enthusiast
Lancashire, England, UK
Last seen: 5 years 28 weeks ago
Lancashire, England, UK
Joined: 2007-01-05
Posts: 195
Points: 194

It's much better to use a

It's much better to use a class then to write styles in your js,

var tables = document.getElementsByTagName('table');
tables[2].class = "thirdTable"

I think you can do this Smile, not used to coding pure js, use jquery now Smile

jQuery would be

$(document).ready(function(){
$("table:first").next().next().addClass("thirdTable");
});

Hope this helps

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 3 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

jQuery could also be done as

jQuery could also be done as

$(function(){
  $("table").eq(2).addClass("thirdTable");
});

eq starts counting at 0, so number 2 is technically the third one.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 23 hours 16 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

className

jon19870 wrote:

tables[2].class = "thirdTable"

Should be

tables[2].className = "thirdTable";

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 8 weeks 50 min ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

Verschwindende wrote: fxCSS

Verschwindende wrote:
fxCSS wrote:

... The table is generated by asp.net so I cannot name/id it. ...

Why not?

I still want to know how the table is generated and why it can't be targeted by adding a class or using the generated ID. Seems much simpler than futzing around with all the ancillaries.

jon19870
jon19870's picture
Offline
Enthusiast
Lancashire, England, UK
Last seen: 5 years 28 weeks ago
Lancashire, England, UK
Joined: 2007-01-05
Posts: 195
Points: 194

It all depends how many

It all depends how many tables one of the ASP controls is building, if it's more than one then you can add a class in the Layout Template for the control and you will have to access it using jQuery or pure JavaScript using the solutions detailed above.

If the ASP control is only creating one table, then give it a class and you can access it easily using CSS. Giving a control a class is a workaround for controlling the presentation of an ASP or .NET control using CSS because these technologies dynamically create IDs for each control for server side code to work with them. Hope this helps Smile

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 8 weeks 50 min ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

OP, show the code.

OP, show the code.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 8 weeks 50 min ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

Hello??? Hello???

Hello??? Hello???

fxCSS
fxCSS's picture
Offline
Regular
Last seen: 8 years 52 weeks ago
Timezone: GMT-4
Joined: 2010-03-24
Posts: 46
Points: 60

jon19870 wrote: It all

jon19870 wrote:

It all depends how many tables one of the ASP controls is building, if it's more than one then you can add a class in the Layout Template for the control and you will have to access it using jQuery or pure JavaScript using the solutions detailed above.

If the ASP control is only creating one table, then give it a class and you can access it easily using CSS. Giving a control a class is a workaround for controlling the presentation of an ASP or .NET control using CSS because these technologies dynamically create IDs for each control for server side code to work with them. Hope this helps Smile

thanks everyone for their input. I really appreciate it.

hey Jon..
I don't really have access to the framework code...only the CSS files. There are many tables on each page which .NET is creating...
I am guessing I will have to use javascript in this case...?

I thought I could do something like this:

#right table table table { }

but doesn't seem to be working...

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 8 weeks 50 min ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

grr

fxCSS wrote:

#right table table table { } ...

If it is a table inside of a table inside of a table inside of id="right" then that will work. What you've shown is not that. You could try a sibling selector instead or this could have all been solved by using the generated ID or showing the code.

jon19870
jon19870's picture
Offline
Enthusiast
Lancashire, England, UK
Last seen: 5 years 28 weeks ago
Lancashire, England, UK
Joined: 2007-01-05
Posts: 195
Points: 194

Don't use the generated ID,

Don't use the generated ID, this is bad practice. You will have to use one of the javascript/jQuery solutions above. Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Hmm haven't read such a

Hmm haven't read such a confusing thread in a while!

And why is a generated ID so bad? I don't get why all the angst with this request why are the tables not each carrying a unique ID? and please no waffling about .ass.nut having to do things a certain way Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

jon19870
jon19870's picture
Offline
Enthusiast
Lancashire, England, UK
Last seen: 5 years 28 weeks ago
Lancashire, England, UK
Joined: 2007-01-05
Posts: 195
Points: 194

It's bad practice because the

It's bad practice because the ID is automatically generated by .NET for reference purposes in the code-behind. This ID is unique but can change if the control is moved around so referencing it in the CSS could lead to problems later on IF it was moved around. All he has to do is use one of the jquery/js solutions above.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 5 hours 56 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

All of which tells me the

All of which tells me the mid-tier language is an inappropriate one for the purpose. The class and id tokens should be under the control of the front-end guy. Every time I think of ASP.Net, or whatever it's called this week, I get a feeling that my grandmother described as someone walking on your grave. :shudder: Tongue

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I have to echo Gary's

I have to echo Gary's sentiments. That is exactly the reply I was expecting Jon and highlights something rotten in .Ass

Regardless a class can be added to each table? or not? If it can why can styles not be applied to the class. As much fun as jQuery is it's not really appropriate to use frontend scripting to work around issues caused by the backend language.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 8 weeks 50 min ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

I do agree that it's not

I do agree that it's not ideal but if you move the control then you change the ID name in the CSS, of course this never happens after launch so it's really just a non-issue.

Of course the better solution is to either wrap the table in a fixed ID <div> or add a CssClass="" attribute to the table. A class can be appropriate in this case. You can also find the generated ID by using .ClientID for the control in question.

.NET 4.0 is supposed to have predictable IDs but this is yet another reason that I've switched to .NET MVC.

jon19870
jon19870's picture
Offline
Enthusiast
Lancashire, England, UK
Last seen: 5 years 28 weeks ago
Lancashire, England, UK
Joined: 2007-01-05
Posts: 195
Points: 194

It is bad practice in my

It is bad practice in my opinion as it's just ANOTHER thing you have to remember to do if controls do get moved around and your right, this doesn't happen often but it does happen. It does also happen after launch of a website, what your saying basically is once something is launched a control is never moved, but they are as the master page can be switched for a new layout therefore changing the generated ID!

Of course adding a container or CssClass to each table is the obvious solution but he doesn't have access to the .aspx/.ascx files as stated in his previous post...

fxCSS wrote:

I don't really have access to the framework code...only the CSS files.

So, you can either use the jQuery solution (this is not normal practice, it's only because the guy doesn't have access to the page files) or reference the dynamically generated ID created for the table.

Regards. Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I read that as "of course

I read that as "of course this never happens after lunch been sitting here puzzling what an earth difference having lunch should make on matters Laughing out loud

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 8 weeks 50 min ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

jon19870 wrote: ... but he

jon19870 wrote:

... but he doesn't have access to the .aspx/.ascx files as stated in his previous post...

fxCSS wrote:

I don't really have access to the framework code...only the CSS files.

Yes, so ideal solutions go right out the window, right? Tongue I'd refuse such a job from the start. It's already giving me stress and I have no dog in this fight. lol

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 8 weeks 50 min ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

Hugo wrote: I read that as

Hugo wrote:

I read that as "of course this never happens after lunch been sitting here puzzling what an earth difference having lunch should make on matters Laughing out loud

ASP.NET is grumpy before lunch. Especially when we withhold her coffee. Laughing out loud

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Given the circs and that it's

Given the circs and that it's not possible to request some sanity in adding a few tokens to the tables, then yes the scripted approach is probably the only real feasible one, but it's a bad solution to a bad problem, simply not good all round, another case of shoot the mid tier programmers!

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Quote: ASP.NET is grumpy

Quote:

ASP.NET is grumpy before lunch. Especially when we withhold her coffee

Sounds like my ideal soulmate, generally attack coding early morning on two sips of coffee, by the third cup have deleted all up to that point and have started over suitably cafinated and calmed Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 8 weeks 50 min ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

Hugo wrote: ... shoot the mid

Hugo wrote:

... shoot the mid tier programmers!

[SOLVED]

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Of course after they've been

Of course after they've been made to sort it all out

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

jon19870
jon19870's picture
Offline
Enthusiast
Lancashire, England, UK
Last seen: 5 years 28 weeks ago
Lancashire, England, UK
Joined: 2007-01-05
Posts: 195
Points: 194

Thinking of it now, how are

Thinking of it now, how are you meant to add the JavaScript/jQuery to the page when you can't access the page files. The only solution you have is to use the dynamically generated IDs. Stare

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 8 weeks 50 min ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

jon19870 wrote: Thinking of

jon19870 wrote:

Thinking of it now, how are you meant to add the JavaScript/jQuery to the page when you can't access the page files. The only solution you have is to use the dynamically generated IDs. Stare

Good point. The situations just keeps getting worse. It's kind of like getting stuck in a whirlpool. May as well just swim toward it to get it over with quicker. Tongue

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 8 weeks 50 min ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

Revisiting my previous

Revisiting my previous suggestion, consider the following:

table { border: 1px solid #f08; }
table + table + table { border: 2px solid #80f; }
table + table + table + table { border: 1px solid #f08; }

Example: http://feelerdealer.com/tableSiblings.html

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 5 hours 56 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Take care with that. Unless

Take care with that. Unless all the tables have the same parent, they're not siblings. Guys who write asp.crp tend to overuse containers.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

fxCSS
fxCSS's picture
Offline
Regular
Last seen: 8 years 52 weeks ago
Timezone: GMT-4
Joined: 2010-03-24
Posts: 46
Points: 60

Verschwindende

Verschwindende wrote:

Revisiting my previous suggestion, consider the following:

table { border: 1px solid #f08; }
table + table + table { border: 2px solid #80f; }
table + table + table + table { border: 1px solid #f08; }

Example: http://feelerdealer.com/tableSiblings.html

I will try this V...thank you!!