[wp-hackers] Adding class to first menu item of submenu inwp_nav_menu

ProDevStudio prodevstudio at gmail.com
Mon Jun 28 15:51:46 UTC 2010


Hi All,

I present you a very simple solution to this issue using jquery:

$('ul.sub-menu :first-child').addClass('first-child');


equally (but more specific):


$('.menu ul.sub-menu :first-child').addClass('first-child');



This will add the class first-child to all the matching first item.



Kind Regards,
Azizur Rahman

----
Do you need cost-effective web hosting solution and Domain name try
http://prodevstudio.com




On Mon, Jun 28, 2010 at 3:55 PM, Jake Goldman <
wphackers at jakemgold.myfastmail.com> wrote:

>  Also never had an issue with first-child selector in IE7+, or any version
> in recent memory of the other browsers. I have seen a lot of HTML/CSS
> developers confuse what exactly this selector does, however.
>
> Often times we let IE6 users "live with" losing the first-child selector
> styles. If its essential, I recommend using IE6 conditional JavaScript to
> apply the style (super easy with jquery if it's loaded anyways).
>
> Jake
>
>
> On 6/28/2010 9:53 AM, Otto wrote:
>
>> Define "flakey". See, I see a lot of this sort of response, but nobody
>> ever explains what they mean.
>>
>> In my experience, :first-child and other CSS selectors work fine.
>>
>> What's "flakey" is poorly conceived and implemented PHP hacks designed
>> to needlessly alter HTML in order to accomplish the same thing that
>> the selector can do just fine.
>>
>> -Otto
>>
>>
>>
>> On Mon, Jun 28, 2010 at 5:18 AM, Gavin Pearce<Gavin.Pearce at 3seven9.com>
>>  wrote:
>>
>>> Hi Otto, Mike,
>>>
>>>  From experience, ul.sub-menu li:first-child, can be a little flakey at
>>> times, even if it's meant to be supported.
>>>
>>> Notwithstanding IE6 ... ;)
>>>
>>> G
>>>
>>> -----Original Message-----
>>> From: wp-hackers-bounces at lists.automattic.com [mailto:
>>> wp-hackers-bounces at lists.automattic.com] On Behalf Of Otto
>>> Sent: 28 June 2010 06:18
>>> To: wp-hackers at lists.automattic.com
>>> Subject: Re: [wp-hackers] Adding class to first menu item of submenu
>>> inwp_nav_menu
>>>
>>> Nope, it is. See their test page. They use a "test link" which adds
>>> stuff to the DOM via Javascript.
>>>
>>> -Otto
>>>
>>>
>>>
>>> On Sun, Jun 27, 2010 at 8:46 PM, Mike Schinkel
>>> <mikeschinkel at newclarity.net>  wrote:
>>>
>>>> Actually, according to your link, it does work in IE7 and up. The
>>>>> caveats it mentions occur when you change the DOM via javascript.
>>>>>
>>>>
>>>> Point taken. But for IE8:
>>>>
>>>> "IE8 does the right thing only after you remove the focus from the test
>>>> link."
>>>>
>>>> Unless I misread, that's not related to DOM manipulation?  FWIW.
>>>>
>>>> -Mike
>>>>
>>>> On Jun 27, 2010, at 9:06 PM, Otto wrote:
>>>>
>>>>  Actually, according to your link, it does work in IE7 and up. The
>>>>> caveats it mentions occur when you change the DOM via javascript.
>>>>>
>>>>> -Otto
>>>>>
>>>>>
>>>>>
>>>>> On Sun, Jun 27, 2010 at 7:29 PM, Mike Schinkel
>>>>> <mikeschinkel at newclarity.net>  wrote:
>>>>>
>>>>>> Why would you need that? Just use "ul.sub-menu li:first-child". CSS2
>>>>>>> has you covered on that score.
>>>>>>>
>>>>>> FYI, li:first-child doesn't work 100%[1] in IE8 nor at all in IE7,
>>>>>> unfortunately.
>>>>>>
>>>>>> -Mike
>>>>>> [1] http://www.quirksmode.org/css/contents.html
>>>>>>
>>>>>> _______________________________________________
>>>>>> wp-hackers mailing list
>>>>>> wp-hackers at lists.automattic.com
>>>>>> http://lists.automattic.com/mailman/listinfo/wp-hackers
>>>>>>
>>>>>>  _______________________________________________
>>>>> wp-hackers mailing list
>>>>> wp-hackers at lists.automattic.com
>>>>> http://lists.automattic.com/mailman/listinfo/wp-hackers
>>>>>
>>>> _______________________________________________
>>>> wp-hackers mailing list
>>>> wp-hackers at lists.automattic.com
>>>> http://lists.automattic.com/mailman/listinfo/wp-hackers
>>>>
>>>>  _______________________________________________
>>> wp-hackers mailing list
>>> wp-hackers at lists.automattic.com
>>> http://lists.automattic.com/mailman/listinfo/wp-hackers
>>> _______________________________________________
>>> wp-hackers mailing list
>>> wp-hackers at lists.automattic.com
>>> http://lists.automattic.com/mailman/listinfo/wp-hackers
>>>
>>>  _______________________________________________
>> wp-hackers mailing list
>> wp-hackers at lists.automattic.com
>> http://lists.automattic.com/mailman/listinfo/wp-hackers
>>
> _______________________________________________
> wp-hackers mailing list
> wp-hackers at lists.automattic.com
> http://lists.automattic.com/mailman/listinfo/wp-hackers
>


More information about the wp-hackers mailing list