Forums

yasser1688

<div class="pagingCss" id="footer">
		<a href="/XXX/Home/Results?page=1">1</a>
		<a href="/XXX/Home/Results?page=2">2</a>
		<a href="/XXX/Home/Results?page=3">3</a>
		<a href="/XXX/Home/Results?page=4">4</a>
		<a href="/XXX/Home/Results?page=5">5</a>
		<a href="/XXX/Home/Results?page=6">6</a>
		7 
		<a href="/XXX/Home/Results?page=8">8</a>
		<a href="/XXX/Home/Results?page=9">9</a>
		<a href="/XXX/Home/Results?page=10">10</a>
</div>

This is how my table code is shown when I view it using Firefox firebug.
I am using Razor with MVC and I am doing paging and these are links to pages.

What I want to know is there any way I can give some css to add a special/seperate style to the number 7 (Note number 7 here is the current selected page and hence no link is shown)

OR is there any way I can add tag to this text using Javascript/jquery ?

Please any help is appreciated.

This is my first post here, so I am really sorry if I have not followed any rules/conventions for writing a post.

Thanks in advance
Yasser

Zeriz

Not sure if I understand the question 100%, but from what I can see you know what a class and a id is - but it always helps to refresh your mind about the basics.

An ID can only be used once in a document, and a class selector can be used as many times you'd wish to. And if you give that number seven a unique ID you will be able to style it like you want.


<a href="#" id="uniqueName">7</a> 

<style type="text/css">
#uniqueName { color: red; font-weight: bold; }
</style>

yasser1688

Hi Zeriz,

Yes I know, but the thing is this html code is generated by the MVC Razor engine and not by me, I am just trying to implemented css here,

Is there any way I can do this ?

OR any way in which I can add an HTML tag to this text dynamically using jquery or javascript

Zeriz

I'm sorry, I have less experience with the MCV Razor engine, so I'm not sure if I can help any further now that I see what the real problem is. I guess you could make jQuery search the documents for the id "#footer", and make it go to the 7th a-attribute to give it an unique ID - but that sounds like a very clumsy way to do this.

I think you should look for the code part that processes this HTML to the document and see if there is any possibility to give it an unique ID from there. :)

monk18

You can use jQuery. In jQuery you 'll have the ability to select a specific child. These links should help you.

http://www.mkyong.com/jquery/jquery-nth-child-selector-example/
http://css-tricks.com/how-nth-child-works/
http://css-tricks.com/useful-nth-child-recipies/

yasser1688

HI Monk18,

Thanks for your reply. I have seen the links you posted. But in my case the child will keep on changing.. is there any way to check which child is not surrounded by any tag and then surround it by some tag ?

Senff

I would just assign CSS to everything in the "pagingCss", and then again for just the links to override that. Something like this:


div.pagingCss {    /* this is the style for the current page */
     color: red;
     font-weight:bold;
     }

div.pagingCss a {    /* this is the style for all other pages */
     color: blue;
     font-weight:normal;
     }

I know you can't fully style the current page number since there's no tag surrounding it, but it's a start....?

yasser1688

Yes, I did try that and I was some what successfull too but now only thing is that the spacing problem still persists.

Here is the screenshot : Link to screenshot...

I know I am close to it, please one more hint and I am there

Thanks in advance :)

Senff

Could make use of a little letter-spacing maybe.... http://jsfiddle.net/senff/ejRhB/

yasser1688

Worked like a charm !!!!

I love this forum

Thanks senff. Made my day!

arun7331

Also you can check this link for a pure css dropdown menu. I don't see any client script written in there and it looks good. But there is a problem. It performs differently in a firefox browser.

http://www.encodedna.com/2013/01/css-animated-dropdown-menu.htm

treehouse : what would you like to learn today?

Forums

Give CSS to a tag less text present in a div.