Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Sandeep Krishnan
Sandeep Krishnan
9,730 Points

Why do we need use class so indiscriminately ? Why can't we just use the parent element like <Header> and style it ?

In HTML and CSS i noticed that we use class quite excessively. We use classes to define a container and then the sub container and then the next child container. It seems quite unlikely ( and may be WRONG) that you will encounter too many different elements in a HTMLS eg - How many times will you use Header element or NAV element ? Most probably only once. But if you are habituated to use class for defining each element won't you over using it ???

I am new to CSS so please excuse my exasperated attempt to do random questioning if you know what I mean.

4 Answers

Christian Andersson
Christian Andersson
8,712 Points
Christian Andersson
Christian Andersson
8,712 Points

I personally tend to select a container by class followed by the elements that follow it if there are not many nested elements that follow it. For example .my_container div p. The reverse is also something I do, like nav .my_container.

The benefit of using classes "everywhere" is that you can more easily restructure your markup without also losing the styling, as that styling will be defined per class and not to what element it is or that follows.

For instance, if I decided to use a span instead of p in my first example above, I'd have to change the css too.

For unique elements though, like body or nav, you're right. You can select the element it self and wouldn't typically need a class for it.

Sandeep Krishnan
Sandeep Krishnan
9,730 Points
Sandeep Krishnan
Sandeep Krishnan
9,730 Points

Thank you Christian. I noticed that you used .my_container div p as a class. Have you defined three classes here or was this supposed to be <div class='mycontainer p'> </div> ? Did you use div as a class or as an element or am i missing some new concept ?

Christian Andersson
Christian Andersson
8,712 Points

A class needs to start with a dot before the name, and an id with a hash-symbol. If a selector has none of those, it's meant to select a tag.

So in the example of .my_container div p I would be selecting (reading from right->left) all the <p> tags that are inside a <div> tag, which in turn are inside an element with the .my_container class.

Here's a visual representation of what the above would match.

<div class="my_container">
  <div>
    <p></p>
  </div>
</div>

note that the first div can be any tag - as long as it has that class.

Have a look here for an in-depth look.

Sandeep Krishnan
Sandeep Krishnan
9,730 Points
Sandeep Krishnan
Sandeep Krishnan
9,730 Points

Understood. You had a div as a parent and a child. This clarifies. Thanks very much again

Christian Andersson
Christian Andersson
8,712 Points

Yes, but it could also have been:

<section class="my_container">
  <div>
    <p></p>
  </div>
</section>

or any other tag with that class.

Sandeep Krishnan
Sandeep Krishnan
9,730 Points
Sandeep Krishnan
Sandeep Krishnan
9,730 Points

Got it - Basically any element after class becomes a child. I didn't know that Div can be used as child to class - I sound weird but I somehow always though Div is different from lets say 'p' or 'span'

Christian Andersson
Christian Andersson
8,712 Points

Check the link I pointed out above.