5

I have a site that generates related video's to a topic. I have 4 thumbnails and I want to add a css play button on the thumbnails, which can be done with this code: ► | It will be like this: http://i47.tinypic.com/250qis9.png

Here is a demo: http://jsfiddle.net/vtPhZ/2/

The problem is that it won't recognize the a:before tags that I gave it to. What am I doing wrong?

The HTML snippet which generates the list: 

<div id="youtubeThumbs">
<ul class="ytlist">
<li>
<table cellspacing="3" cellpadding="3" border="0">
<tbody>
<tr>
<td valign="top" rowspan="2">
<a class="clip" style="cursor: pointer;">
<span>
<img src="http://i.ytimg.com/vi/1q47bOtV3-Y/hqdefault.jpg">
<em></em>
</span>
</a>
</td>
<td valign="top">
</tr>
</tbody>
</table>
</li>

And the CSS I tried to use (without success):

.ytlist li > a:before {
content: "►";
}

How can I make it work?

user1717526
  • 131
  • 1
  • 2
  • 14

1 Answers1

1

I can't explain why but for some reason your change of methods for declaring a child element is causing the problem. Using my first two recommendations of using the unicode entity for the content and using the pseudo element rather than the pseudo class, the CSS should work. However, it did not initially work. When I removed > from the first line the CSS worked.

Here's a demo: http://jsfiddle.net/vtPhZ/4/

Your method was strange but the fact that it didn't work was even more strange...

henryaaron
  • 6,042
  • 20
  • 61
  • 80
  • 3
    The child selector written by the OP does not work because the `a` tag that is being targeted is not an immediate child of an `li` tag. – Artur Kim Oct 03 '12 at 20:36
  • Ah, that's interesting. I was sure that the `>` has the same function as a space @ArturKim – henryaaron Oct 03 '12 at 20:37