/    Sign up×
Community /Pin to ProfileBookmark

ul#menu or #menu ul – whats the difference?

Copy linkTweet thisAlerts:
Aug 06.2009

hi,

well the title of this post says it all, but ill repeat it:
ul#menu OR #menu ul
as a selector: what’s the difference?

thnks

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@SkumAug 06.2009 — Well, as with all CSS:

#menu ul - styling for lists inside #menu

ul#menu - styling for #menu inside list

So it depends what you're trying to do.
Copy linkTweet thisAlerts:
@nickelleonAug 06.2009 — styles made to "#menu ul" will affect all ul's inside #menu. (Read More)

example:
[code=html]<div id="menu">
<ul>
<li>this ul is affected by #menu ul</li>
</ul>
</div>[/code]

styles made to ul#menu will only affect the ul with an id of menu. (Read More)

example:
[code=html]<ul id="menu">
<li>this ul is affected by ul#menu</li>
</ul>

<div id="menu">
<ul>
<li>this ul is NOT affected by ul#menu</li>
</ul>
</div>[/code]
Copy linkTweet thisAlerts:
@gilyotinaauthorAug 07.2009 — Thanks,

nickelleon - in the second example you gave,

<ul id="menu">

<li>this ul is affected by ul#menu</li>

</ul>
[/QUOTE]

I could also just refer to that list as #menu (and not ul#menu) and that would mean the same, right?
Copy linkTweet thisAlerts:
@CharlesAug 07.2009 — In one direction, yes. If you are using this stylesheet across many pages and you want to style all menus, even those that aren't unordered lists, then use [font=monospace]#menu[/font]. But if you want to style the unordered lists differently that the ordered lists you could use [font=monospace]ul#menu[/font].
Copy linkTweet thisAlerts:
@nickelleonAug 07.2009 — Thanks,

nickelleon - in the second example you gave,



I could also just refer to that list as #menu (and not ul#menu) and that would mean the same, right?[/QUOTE]

Yea, you could just use #menu to identify that <ul>. Using ul#menu means that only a <ul> with an id of #menu is affected. So if you had a <div id="menu"> on another page, the CSS for ul#menu wont affect that div, but the CSS for #menu will. Make sense?
×

Success!

Help @gilyotina spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...