0

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)

Andrei V
  • 7,306
  • 6
  • 44
  • 64
  • Like add a border and background around ` 2 `? – Salman A Apr 22 '14 at 06:35
  • @SalmanA, exactly. For a basic example, lets assume that I want to style it just like the `a` elements but with a different background color (blue). – Andrei V Apr 22 '14 at 06:37
  • @AndreiV the untagged text in your example is just a **text node** and as far as I know we can't style a **text node** in CSS without basing on styling the parent of the text node (which there are just a few things we can style, such as `color` but `background` is something can't be applied to a **particular** text node via the parent). – King King Apr 22 '14 at 06:41
  • @KingKing, my initial research yielded a similar conclusion. However, I woke up full of optimism today and thought that someone might have at least a hint of what I could do. – Andrei V Apr 22 '14 at 06:45
  • There is only a dirty workaround I've tried here http://jsfiddle.net/viphalongpro/U7Wsh/1/ It looks not really good but I think you won't have any beautiful solution to this problem. Letting them be black (with no background) by default may be better. – King King Apr 22 '14 at 07:01
  • @KingKing, that's actually what I originally had in mind. If I could apply some padding or some other style for the "current page text", your solution would be perfect. – Andrei V Apr 22 '14 at 07:11
  • possible duplicate of [is there a CSS selector for text nodes/elements?](http://stackoverflow.com/questions/5688712/is-there-a-css-selector-for-text-nodes-elements) – Mr_Green Apr 22 '14 at 07:37
  • @Mr_Green, I partially agree. During my initial documentation I saw the link you posted. That's why I specified that I'm styling the pager generated by the `WebGrid`. Someone with additional experience regarding `WebGrid` could provide a viable answer (using `WebGrid` options I might have overlooked). – Andrei V Apr 22 '14 at 07:43
  • If JavaScript/jQuery is an option you can wrap the "text node" inside a span and style it anyway you want. – Salman A Apr 22 '14 at 08:21
  • @SalmanA, I've seen a similar solution that used regular expressions to select it. However, my segex skills need improvement. Is there another way of wrapping it? – Andrei V Apr 22 '14 at 08:26

1 Answers1

2

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

Salman A
  • 262,204
  • 82
  • 430
  • 521
  • I wasn't actually thinking of a "direct" CSS selector. I suspected there could be a concise way of targeting that part of the element but was not sure haw to tackle it. Your solution is perfect. Thank you! – Andrei V Apr 23 '14 at 08:03