Menu
How can I target styling to the 1st <span> (Foo) without affecting the 2nd <span> (Bar) preferably without using a class? IE6 support is not needed. I tried using first-child but that only works without the image being there.
I could live with the degradation if I use .adcodeblock span:nth-child(3), but I thought I would check with more experienced people first.
<div class="adcodeblock">
<img src="/images/aUHFgK.jpg" alt="" border="0">
<span>Foo</span>
<span>Bar</span>
</div>
437
$('#div1'). click(function(){ var v = $(this). find('span'). text(); });
The CSS selector div:first-of-type only selects the very first element of its type and styles it. The div span:first-of-type selects the first span in each div since the div is the parent element.
The :first-child selector allows you to target the first element immediately inside another element. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling content.
The :first-child selector is used to select the specified selector, only if it is the first child of its parent.
The <span> tag is easily styled by CSS or manipulated with JavaScript using the class or id attribute.
You can use the :first-of-type pseudo-class:
.adcodeblock span:first-of-type
See this for a browser support table. For older browsers I would use something like this:
.adcodeblock br + span
If you can live without IE8 and below, you could try
.adcodeblock span:nth-of-type(1)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
