Selectors- why?

[Water]

I'm just not understanding this. What is the point of selectors in CSS?Why is an element any different if you call it by a regular name in your css markup of if you call it .something.From all I can see they seem to work in exactly the same way. Why is that dot important?

[Labtec]

When using a dot it means that certain element has been given a class. Let's say we have a <div> with a class of myDiv:

<div class='myDiv'> </div>

If we just call it by element name (div), then any styles we declare will affect ALL <div> tags on the page. We give things ID's or classes to be able to identify certain elements and give them certain style rules, without those styles affecting every element. Does this help? Regards, Lab.

[boen_robot]

It might help to illustrate this with a slightly more complex HTML:

<div class="myDiv"> </div><div class="something"></div><div class="something"></div>

If you have a selector that says "div", you apply the style to all of the elements above (since in the above example, they're all divs). The selector ".myDiv" would apply only to the first div, and ".something" would apply to the second and third elements.

[thescientist]

I'm just not understanding this. What is the point of selectors in CSS?Why is an element any different if you call it by a regular name in your css markup of if you call it .something.From all I can see they seem to work in exactly the same way. Why is that dot important?

because what if you don't a style to apply to every single type of one element? Depending on the complexity of the sites you're working on, you might not be able to recognize the usefulness of being able to distinguish one div form another.

[Water]

Why can you not just do <div> <something> </something> </div> if you want something inside div to be different?

[Ingolme]

<something> isn't a valid HTML element.

[Labtec]

Why can you not just do <div> <something> </something> </div> if you want something inside div to be different?

That's the whole point, there could be 6 <div>s on the page but if you wanted to just style one different from the rest, you need to be more specific with your selector. By giving it an id or class, it allows you to be more specific when styling the element because you target just that one div with that certain id or class. Kind regards, Lab/

[Water]

Think I get it....not entirely sure of its usefullness yet but maybe I will when I move beyond experimentation and into full sites

[Raspberry]

Imagine a navigation menu.

<nav>	<a href="/home.html">Home</a>	<a href="/articles.html">Articles</a>	<a href="/forum.html">Forum</a>	<a href="/help.html">Help</a></nav>

If you want to highlight the current location with CSS, you need a distinguishable element.

<nav>	<a href="/home.html">Home</a>	<a href="/articles.html">Articles</a>	<a href="/forum.html" class="here">Forum</a>	<a href="/help.html">Help</a></nav>

And you style it

nav a {	/* default design */}nav a.here {	/* current location */}

Why can't we use <any-name-we-want> tags ? Because it's meaningless.Each html tags have a meaning (h1 for main title, p for paragraph, li for list element...)Only two exceptions exists : <div> and <span>. They're meaningless but can be used for organize a document by grouping content and user generated content styling. It's their purpose.Before HTML5 you usually found <div id="nav"> <div id="head"> <div id="article"> <div id="foot"> elements containing the whole document. A class haven't to be meaningful, and you can combine them.

<a class="highlight" href="/home.html">Home</a><a class="external-link" href="http://www.exemple.net/">www.exemple.net</a><a class="external-link highlight" href="www.w3.org">W3C.org</a>

[thescientist]

I guess the issue is that you think it's a good idea for anyone to just be able to make their own tag and let everyone hope for the best. I prefer having one set of rules and behaviors defined and implemented, and then I'll just work with and style those.

[thescientist]

Also, div and span are certainty not meaningless. I'm not sure where that comes from. I use then quite often and to great effect.

[Raspberry]

<div> and <span> haven't any meaning by themselves, their purpose is grouping elements meaningfully.

[dsonesuk]

A div element is block, span is inline element, IF you were to create your own element you would have to define if it is a block element, or a inline element, some html elements have a default styling assigned to them i.e. UL, LI, if you followed your method <my-unordered-list><with-my-list-styling>Why am i doing this?</with-my-list-styling></my-unordered-list> you would have redefine this styling,( block, padding, margins, text-indent, list styling etc) meaning more work, instead just using the present ul, li tags that are made for this specific purpose,

[Raspberry]

If he define his own tags, it's not HTML, it's another language invented by him and unsupported by w3c.It's more important than the default style of the tags.

[dsonesuk]

I don't think so, consider <select> and <option>, how would you define these as new tags, and get these to act as these do. <select id="myselect1"><option value="0">0</option><option value="1">1</option><option value="2">2</option></select> I know what to do with this, and i'm IE <myselect1><myoption0 value="0">0</myoption0><myoption1 value="1">1</myoption1><myoption2 value="2">2</myoption2></myselect1> I don't know what to do with this and i'm all the other better browsers.