Search code examples
javascriptcsswebgrid

Different styles for text and elements inside another element

I'm trying to style the pager of a WebGrid element in Asp.Net MVC. The pager looks something like this:

<td colspan="4">
    <a href="#"><<</a>&nbsp;
    <a href="#">1</a>&nbsp;
    &nbsp;2&nbsp;
    <a href="#">3</a>&nbsp;
    <a href="#">>></a>&nbsp;
</td>

Although I can easily style the a elements, I'm having problems styling the "untagged" text (in this example, the 2). Is there a way I could target/select just the text and not the anchor elements? (JSFiddle provided)

Solution

  • I am not aware of any CSS selector that can target text nodes. You can use JavaScript or jQuery to wrap the active link inside a tag; then style it appropriately. Here is an example:

    $(".pagination").contents().filter(function () {
    return this.nodeType === Node.TEXT_NODE && /\d+/.test(this.nodeValue);
}).wrap("<b></b>");

    Demo here