Grow your CSS skills. Land your dream job.

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

  • # February 17, 2012 at 7:26 am

    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

    # February 17, 2012 at 7:48 am

    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.


    7



    # February 17, 2012 at 7:56 am

    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

    # February 17, 2012 at 8:03 am

    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. :)

    # February 17, 2012 at 1:46 pm

    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/

    # February 20, 2012 at 1:25 am

    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 ?

    # February 20, 2012 at 5:27 am

    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….?

    # February 20, 2012 at 6:10 am

    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 :)

    # February 20, 2012 at 7:02 am

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

    # February 20, 2012 at 7:51 am

    Worked like a charm !!!!

    I love this forum

    Thanks senff. Made my day!

    # January 7, 2013 at 12:41 am

    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

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".