I am using a customized user control (that I don't have the permission to modify) which renders the HTML for a table as shown:
<tr>
<td></td>
<td></td>
</tr>
It lets me add any control dynamically within the tags. My question is how would I set the style of the cell for the table cell. Normally, I would do <td class="myClass">. Since I don't have the source code to modify it, the workaround I am using is to create a <div>, set the CSS class and add it to the <td>. The code looks something like this:
HtmlGenericControl divControl = new HtmlGenericControl("div");
divControl.Attributes.Add("class", "myClass");
//Add a textbox to divControl.
//Add the divControl to the customized user control
This does not give me the same UI I am expecting.
If you can, just add a DIV before the table is generated. The class name for the outer div will be inherited by the TD elements:
<div class="MyClassName">
//table code here
</div>
Then you can use CSS as follows:
.MyClassName TD { //CSS here }
Try using a SPAN instead of a DIV. A DIV is a block-level element that carries some extra formatting baggage along with it. The SPAN is an inline element and won't alter the presentation semantics the way a DIV will.
You might also be able to use hierarchical CSS selectors to achieve the same effect without having to wrap the contents of the table element in a container. This would probably be true if your CSS class were to apply equally to all table elements, but wouldn't work if they were to apply to some and not others.
After your control is added to the page's control tree you can use it's "parent" property to work up the tree to the table control.
NewDynamicControl.Parent.Parent.Parent.Attributes.Add("class", "myClass")
This assumes you have good knowledge of what the usercontrol you are adding to looks like and that it won't be changed by someone else and end up breaking your code later.
Just use divs and give classes to them.
Related
I want to edit the "p" content which is inside the content div on my shopping cart page.
As the content div appears on every page, I don't wish to just go for "content + p"
Is there an attribute I can use that will "select all p tags in the div above cart-module"
<div class="content">
<p>The content I want to edit<./p>
<div class="cart-module">
<div class="cart-total">
Also, is there a problem with attribute rules slowing down the pages?
If the structure is always as you describe in you question then you can go with the first child selector:
.content > p:first-child {
background-color: red;
}
wich will get the p inside the content only if it is in the first place inside of it.
Regarding your second question, it will always depend on how and how many attributes you use on each page. The attribute selectors are slower than the ids or classes, because the latter are indexed by the browsers, just for this reason. Anyway, if you don't use them massively surely you won't notice the difference.
Of course, if you have access to modify the html structure the easiest would be to add a class to the p tags you want to select...
It's not possible with pure CSS.
If you want to style "all p tags in the div above cart-module", do some JQuery instead.
First, define a piece of CSS:
.my-custom-css {
color: chucknorris;
}
Then use JQuery prevAll()
$(".cart-module").prevAll().addClass("my-custom-css");
// Or do something with p tag
$(".cart-module").prevAll().find("p").addClass("my-custom-css");
// Edit content
$(".cart-module").prevAll().find("p").text("Thank God It's Friday");
Oh you want to modify something like structure or content of those "all p tags in the div above cart-module", just do the same with prevAll().
I don't believe it's a typical thing to see, but I'm curious if this is a possible inline scenario.
I have a table with several rows. Some of those rows may or may not have hrefs.
Can I specify link styles inside the or tags? Rather than inside the href tags?
<table>
<tr style="color:#000;">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Here's how I want to affect links only:
.a { text-decoration:underline;color:#EEE; }
I already placed a style in the <tr> tag, which affects regular text. Can I specify link styles inside there too? Or is that a limit that can only be done from within stylesheets or inside the tag itself?
Link colors are not inherited from their parent elements. You'll need to specify the color for the links specifically.
Firstly, let's get some terminology clear so we're all on the same page.
Elements such as the anchor tag <a> can be styled using CSS. Attributes, such as href give certain meaning to the tag they belong too. You cannot style attributes alone.
In order to change the style of all anchor tags (all links) in your site you can simply do:
a{
/* my styles here */
}
As #ceejayoz pointed out above, link colours are not inherited from their parent and so you either need to style them individually inline <a style="color:#eee"> (which I sugest you avoid doing), or you style them from a stylesheet/css code block.
I am using the MVC3 WebGrid (Razor) and everything is working fine. However, I need to vary the css class that is attached to a particular column based on the value that is in the column.
I have a non-Server-side JQuery way of doing this already. There are a few reasons why I want this to happen outside of JQuery.
Basically, I'm doing cell traffic-lighting/highlighting based on the value of the cell. So if the value in the cell is "62.5", the class that needs to be attached to the <td> is scr60. This sets the background-color for the cell to the appropriate shade.
<tr>
<td class="scr60">62.5</td>
</tr>
I know I can control the output of the contents of the cell using the format: parameter on the grid.Column() definition, but I need to set the CSS class for the actual <td> that contains the contents (so that the entire cell is highlighted, not just the value/content itself.
I already have a separate helper class/method to output the name of the CSS class I want to use, based on the value. What I need is a way to adjust the style of the containing <td> using the output of that method.
Again, I already have a JQuery solution that does this, I'm looking for a way to do this with the webgrid itself.
From my experience with WebGrid you can't do this BUT you can include a span within the "cell" and add your class(es) to the span based on whatever condition you want.
Like the 'format:' parameter, there is a 'style:' parameter which you can use like this:
style: "class1 class2"
Lets say I want to display tool tips for links using the title attribute:
<a class="editcommand" title="Edit" ...>
Is there a way to specify the title text for all elements of the same class using CSS, so I don't have to repeat it within each element?
CSS is only for the content of the style="" attribute, not other HTML tags. This sounds like a job for Javascript. If you're using jQuery here's an example:
$('a').attr('title', 'My universal title');
Unfortunately, no, CSS does not provide that ability. Since title is an HTML attribute (besides the <title> element of course), it's up to the markup structure (DOM) to define it, not the style (CSS).
With JavaScript it's just a matter of attaching the attribute to a set of DOM elements with that class. But again, that's modifying the DOM elements themselves, not their style properties.
How would I go about selecting a parent element when a child element is hovered over.
For example:
<table id="tb1">
<tr>
<td id="td1">make table red</td>
<td id="td2">make table yellow</td>
</tr>
</table>
Is there a way to select tb1 when td1 is hovered over using either the id or the class tags?
Unfortunately it is not possible to select a parent element when a child element is hovered using just CSS. This would defy the cascade in cascading style sheets. You could however accomplish this using JavaScript or one of the libraries such as jQuery easily enough.
If you were to use jQuery the following would provide the result that you are looking for:
http://jsfiddle.net/fSqSx/
Are the IDs of the table and the TDs always named like that? Assuming hovering over a TD generates an event with a function you could do
function highlightTable(){
var tableID=this.id.replace('td','tb');
document.getElementById(tableID).style.backgroundColor='#c0c0c0';
}