Jump to content
Water

Selectors- why?

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

<something> isn't a valid HTML element.

Share this post


Link to post
Share on other sites
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/

Share this post


Link to post
Share on other sites

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>

  • Like 1

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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,

Share this post


Link to post
Share on other sites

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> :good: 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> :crazy: I don't know what to do with this and i'm all the other better browsers.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...