CODEWITHSUNDEEP
jqueryasp.netcsstelerikcss-selectors
Anyname Donotcare
Anyname Donotcare

Reputation: 11393

How to exclude specific control from css?

I have a telerik treeview which renders in HTML as ul.

When I try it in my aspx with specific css, it doesn't appear in the correct way because the CSS file has ul and li selectors .

From firebug :

enter image description here enter image description here

Now i want to exclude this control from (#tabContaier ul ,#tabContaier Li)

I want some general solution to this problem especially with the telerik controls.

Edit:

After apply the cascade technique :

<telerik:RadTreeView ID="RadTreeView1" runat="server" CheckBoxes="True" Height="200px"
                                                                TriStateCheckBoxes="true"  CheckChildNodes="true" Skin="rad_rv"  EnableEmbeddedSkins="false" >

enter image description here

Upvotes: 0

Views: 1507

Answers (1)

Sunyatasattva
Sunyatasattva

Reputation: 5840

There are several ways to override rules in CSS if you can't change the .css file in which these rules are specified.

  1. Cascade: As the name implies, in CSS rules written later override rules written earlier, whether they are in the same sheet or not.

  2. Specificity: Be more specific than the rule you want to override with your selectors. More about specificity.

  3. Inline styles: Write your styles inside the HTML element using the attribute style. This is strongly not recommended, as you should separate presentation and content (that's the whole point of CSS); however, this is the usual way things are done when you override them in javascript (see below). Inline styles are really just a particular case (the strongest) of specificity; it's like saying: “I mean exactly this element here”.

  4. Use !important after a rule: resort to this as a last means of overriding, as !important overrides anything but user-defined !important marked stylesheets.

Of course, since you tagged your question with jQuery, you could do that with jQuery and javascript in general as well. But I don't see, in this case, why you would want to do that.

Examples

In your case, example of better cascading would be just: define #tabContainer ul after your telerik stylesheet defines them. Simple as that. When do you import that stylesheet? Move it above your own stylesheet and you will be sure everything you will write will override what's written there.

An example of specificity, would be defining something like #container #tabContainer ul. This will override the less specific #tabContainer ul rule.

Inline style would mean that you actually put the styles hard-coded in your element, like so:

<ul class=rtUL rtLines" style="height: 40px;">

Using !important works on single rules you want to brute force in, like so:

#tabContainer ul {
    height: 40px !important;
}

Upvotes: 3

Related Questions