How can I target these CSS items in the stylesheet?

Question

Hello, I'm working with a DotNetNuke menu - which may be irrelevant, since my question is mostly about CSS syntax.

What is the syntax to build styles for a class that looks like below?

<tr class="mi mi0-0 id58 first">

Thanks for any help, much appreciated!

I am trying to target the row on the bottom of this. I tried using . instead of the spaces in the CSS but for some reason the text in the table row I am wanting to change isn't changing?

<span id="dnn_dnnNAV_ctldnnNAV" class="main_dnnmenu_bar" tabindex="0" style="-moz-user-select: none;">
<div id="dnn_dnnNAV_ctldnnNAVctr55" class="main_dnnmenu_rootitem mi mi0 id55 root first">
</div>
<table id="dnn_dnnNAV_ctldnnNAVsub55" class="main_dnnmenu_submenu m m0 mid55" cellspacing="0" cellpadding="0" border="0" style="position: absolute; top: 243px; left: 642px; clip: rect(auto, auto, auto, auto); display: none;">
<tbody>
<tr id="dnn_dnnNAV_ctldnnNAVctr58" class="mi mi0-0 id58 first">

Answer 1

All without spaces:

.mi.mi0-0.id58.first {

}

Answer 2

Elements can have multiple classes, and sweet gave the correct way of targeting this element.
However, you can target it using just a subset of its classes: I'd try styling .mi or .mi.first, and if possible ignore the classes .mi0-0 and .id58 - they appear dynamic and will break the design if they change.

Answer 3

Concatenating them together does not work in IE6 if IIRC

Answer 4

first what gets generated to you, is some html with inline CSS, and some CSS classes and ids, i beleive you want to target those element from CSS,

1. you can target them using en external CSS file, but the inline style sheed will override the properties you insert in the inline.
2. you can also insert the Css in the same file.
   

in order to reference element inside of the Css you can use the class or the id

1. for the class you use:
   #main_dnnmenu_bar { //enter Css properties here }
2. and for the id you can use:
   .dnn_dnnNAV_ctldnnNAV { //enter Css properties here }

you can google for w3schools for a quick review of CSS, i am not allowed to enter hyperlinks

for class using this: mi mi0-0 id58 first you can do:
.mi{enter code here'} .first{enter code here'} and if you element have those two class referenced properties contained in both of them will be applied to it, if only one, only those properties gets applied.
i hope this was helpful. good luck.

Answer 5

Do you have your page somewhere online (so I could debug where the problem hides)?

Answer 6

There are several ways to target that line.

To ensure that it is not being overruled, you should include as much of the path to the element as possible, and make sure (perhaps with JS) that there are no styles applied directly to the element.

(Also consider that your style is being removed at run time by Javascript)

Even ie6 handles descendants, so:

span table tr{ /*your styles*/ } will get all tr's in that setup.

so

span#dnn_dnnNAV_ctldnnNAVan table#dnn_dnnNAV_ctldnnNAVsub55 tbody tr.first

or

span#dnn_dnnNAV_ctldnnNAV.main_dnnmenu_bar table#dnn_dnnNAV_ctldnnNAVsub55.main_dnnmenu_submenu.m.m0.mid55 tr#dnn_dnnNAV_ctldnnNAVctr58.mi.mi0-0.id58.first

IE7+ handles children '>', which is more specific:

span#dnn_dnnNAV_ctldnnNAVan > table#dnn_dnnNAV_ctldnnNAVsub55 > tbody > tr.first

You can also target other things besides the class if you need to: span[tabindex='0'].....

I think IE7 also handles first-child: but you should check that.