/    Sign up×
Community /Pin to ProfileBookmark

syntax? styles?

What’s the difference in saying

[CODE]#mainlevel-nav a:hover {
text-decoration: none;
}[/CODE]

and saying

[CODE].mainlevel-nav a:hover {
text-decoration: none;
}[/CODE]

And how come some classes have periods in front of them and some don’t?

Sorry for the noob questions.

to post a comment
CSS

10 Comments(s)

Copy linkTweet thisAlerts:
@lilqhgalauthorApr 07.2005 — Okay, I found a website to answer my question:

Class Selector - .[Class Name] - Matches elements with CLASS attributes carrying a [Class Name] value.

ID Selector - #[ID Name] - Matches the element carrying the unique ID attribute value of [ID Name].[/QUOTE]


So now my next question is: what's the difference? and when do you use one and when do you use the other?
Copy linkTweet thisAlerts:
@the_treeApr 07.2005 — [b]First question:[/b] the hash refers to an elements id, the period refers to an elements class, if there were niether, it'd refer to an element.

[b]Second question:[/b] when refering to an elements class, a period is always used; when declaring an elements class, a period is never used.

[b]Edit[/b] Crud buckets, I never saw your second post. An id is unique, it can only be used once. A class gets used lots of times, and an element have a selection of classes.
Copy linkTweet thisAlerts:
@lilqhgalauthorApr 07.2005 — the tree, thanks for the quick reply.

Regarding the second answer: Can you "dumb" that down a little for me? :o I'm fairly new to css, only really using it for basic font styling, so really don't know the difference or when/why you would use one vs. the other.

thanks again!
Copy linkTweet thisAlerts:
@the_treeApr 07.2005 — An id is unique, it can only be used once. A class gets used lots of times, and an element have a selection of classes. Example:[code=html]<ul id="navigation">
<li id="active"><a href="page.htm">Home</a></li>
<li><a href="page.htm">Catorgries</a></li>
<li class="newcontent"><a href="page.htm">Projects</a></li>
<li class="unimportant"><a href="page.htm">Archives</a></li>
<li class="unimportant"><a href="page.htm">Contact</a></li>
<li class="unimportant newcontent"><a href="page.htm">FAQ</a></li>
</ul>[/code]
Copy linkTweet thisAlerts:
@FangApr 07.2005 — [I]class="new content"[/I] This is a multiple class, 'new' and ''content'

[I]class="unimportant" class="newcontent"[/I] Only 1 of these will be applied depending on the browser.

Use a multiple class: [I]class="unimportant newcontent"[/I]

A useful tutorial is: http://www.brainjar.com/css/using/

Warning: some of the patterns show are not fully supported in all browsers. Check [URL=http://www.csscreator.com/attributes/]support[/URL] before using.
Copy linkTweet thisAlerts:
@the_treeApr 07.2005 — Wow, I sure am ignorant, will edit post.

Thanks for that fang.
Copy linkTweet thisAlerts:
@toicontienApr 07.2005 — Browsers, when applying the style to a page, treat IDs and classes the same. You can give more than one HTML tag the same ID and the browser will apply the styles for that ID to each tag. The [url=http://validator.w3.org/]W3's HTML validator[/url] will give you an error if an ID is on a page more than once. And if you get into DHTML and use the document.getElementById method to grab a reference to an HTML tag, you'll get a JavaScript error if you try to use an ID that's on the page more than once.
Copy linkTweet thisAlerts:
@FangApr 07.2005 — Read the tutorial, it's a bit heavy going for n00bs, but it covers the essentials.
Copy linkTweet thisAlerts:
@FangApr 07.2005 — [B]toicontien[/B] IE can reference multiple ID's (with the same value) as a collection. Gecko is going to build in the same functionality albeit switchable. ?
Copy linkTweet thisAlerts:
@toicontienApr 07.2005 — Strange. I thought getting a collection of elements was best suited for using classes and the document.getElementsByClassName method. At least I think that's the method, right off hand.
×

Success!

Help @lilqhgal 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,
)...