Water Posted March 9, 2013 Share Posted March 9, 2013 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? Link to comment Share on other sites More sharing options...
Labtec Posted March 9, 2013 Share Posted March 9, 2013 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. Link to comment Share on other sites More sharing options...
boen_robot Posted March 9, 2013 Share Posted March 9, 2013 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. Link to comment Share on other sites More sharing options...
thescientist Posted March 9, 2013 Share Posted March 9, 2013 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. Link to comment Share on other sites More sharing options...
Water Posted March 10, 2013 Author Share Posted March 10, 2013 Why can you not just do <div> <something> </something> </div> if you want something inside div to be different? Link to comment Share on other sites More sharing options...
Ingolme Posted March 10, 2013 Share Posted March 10, 2013 <something> isn't a valid HTML element. Link to comment Share on other sites More sharing options...
Labtec Posted March 10, 2013 Share Posted March 10, 2013 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/ Link to comment Share on other sites More sharing options...
Water Posted March 12, 2013 Author Share Posted March 12, 2013 Think I get it....not entirely sure of its usefullness yet but maybe I will when I move beyond experimentation and into full sites Link to comment Share on other sites More sharing options...
Raspberry Posted March 15, 2013 Share Posted March 15, 2013 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> 1 Link to comment Share on other sites More sharing options...
thescientist Posted March 16, 2013 Share Posted March 16, 2013 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. Link to comment Share on other sites More sharing options...
thescientist Posted March 16, 2013 Share Posted March 16, 2013 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. Link to comment Share on other sites More sharing options...
Raspberry Posted March 16, 2013 Share Posted March 16, 2013 <div> and <span> haven't any meaning by themselves, their purpose is grouping elements meaningfully. Link to comment Share on other sites More sharing options...
dsonesuk Posted March 16, 2013 Share Posted March 16, 2013 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, Link to comment Share on other sites More sharing options...
Raspberry Posted March 17, 2013 Share Posted March 17, 2013 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted March 17, 2013 Share Posted March 17, 2013 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now