CSS selectors in ASP.NET web forms

Question

I have a web forms app with a CSS file for layout. One of my elements, which will be much more difficult to do in CSS without using IDs, also has to have runat="server" since I control visibility server side.

<div id="x">
    <div id="whatever" runat="server" visible="false">
        <div id="y">
            ....
        </div>
    </div>
</div>

My problem is that in the CSS, I don't know how to ignore that whatever div with my selectors, and unless I inline the CSS and put in server to client control translation, I won't know the control names until runtime.

#x
{
    position:absolute;
    height:30px;
}

    #x #whatever??? #y img
    {
        margin:-7px 15px 0 30px;
    }

    #x #whatever??? div
    {
        width:250px;
        float:left;
    }
etc.

How should I work around this? Is there a server side container control that doesn't render output but could be used to contol the visibility/rendering of its contents, or is there a trick in CSS to ignore that intermediate div?

This is additionally confused by the fact I have the x div in a master page and the whatever and y divs are both in the page itself. I know this wouldn't be an issue if I were using MVC, but at this point switching is not an option.

JonVD · Accepted Answer · 2010-11-26 15:50:00Z

2

I'm not sure if it's just your example but you seem to be drilling through the whole tree each time you select something. This isn't needed in CSS, the following will do the trick:

Direct 'x' selector

#x 
{ 
    position:absolute; 
    height:30px; 
}

Any Image that is a descendant of 'y'

#y img 
{ 
    margin:-7px 15px 0 30px; 
}

Any div that is a descendant of 'x'

#x div 
{ 
    width:250px; 
    float:left; 
}

Here is a handy and easy to understand selector explaination, more or less just grab the one you need and test it out somewhere like here (My favorite testing site).

edited Nov 26, 2010 at 15:50

answered Nov 26, 2010 at 15:39

JonVD

4,27826 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kendrick Over a year ago

The problem here is that I don't want the intermediary div to get the properties, I just want the divs under #whatever. It's possible I could add another client-side div nested directly inside the server-side one, and reference from there. Seems like a good avenue to explore anyway...

JonVD Over a year ago

In that case keep the 'y' div as a wrapper and use the selector '#y div' to get all your child divs in your wrapper. This way you bypass that annoyance all together.

WiseGuyEh · Accepted Answer · 2010-11-26 15:27:41Z

1

using CSS class selectors is a quick and easy way around this problem- not as fast as CSS id selectors but they will ALWAYS work (you could calculate the client ID of the "whatever" div element but this will change if you for example, move it into a Panel control, repeater control, etc.)

answered Nov 26, 2010 at 15:27

WiseGuyEh

19.1k1 gold badge23 silver badges21 bronze badges

4 Comments

Kendrick Over a year ago

I tried switching them over to class selectors, but I was running into some problems with the components that aren't specified by ID/Class (such as #x div). It might just be a matter of re-doing some of it, but I'm not that well versed in CSS. The .css file I have came from an external designer, and I'd prefer not to change it if I don't have to.

WiseGuyEh Over a year ago

Couldn't you just do .x_class div? This would only mean a slight re-write of the CSS, converting id selectors to class selectors

Kendrick Over a year ago

I didn't know you could do that with classes. I'll check that out first, then the recommendation by @JonVD if it doesn't work for me.

Kendrick Over a year ago

Neither option seemed to work, but I'm probably missing something in the code somewhere and it isn't a CSS problem at all. I've called in the CSS guru to look at it next week.

Orif Khodjaev · Accepted Answer · 2015-02-10 14:13:07Z

1

If you are using .net 4 you can specify ClientIDMode="Static" for the block where you need the same id you specified on the server side.

Just in case someone will need it, you can fetch the ID generated by the framework in your javascript like this:

document.getElementById('<%= some_control.ClientID %>');

answered Feb 10, 2015 at 14:13

Orif Khodjaev

1,1021 gold badge13 silver badges34 bronze badges

Collectives™ on Stack Overflow

CSS selectors in ASP.NET web forms

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related