CODEWITHSUNDEEP
cssclasshtml
Alex Rahr
Alex Rahr

Reputation: 61

What does "div.container" and mean in CSS

Currently tweaking a theme and have tried searching for an answer to this question to this! I'm not stuck - but more just want to know the answer out of curiosity.

I understand that

I've also been reading on this post about how you can add specificity to your html/css through combination of elements/ids/classes ie: 

a.fancy { color: red; } /*an element that has an anchor and a class = red.*/

However the code I am working on has the following elements that I don't understand:

div.footer {background-color: {{ settings.footer_color }};

Why would you specify "div.footer" as both the div and the class when simply using a "." would suffice? In my mind there would be no point when the class ".footer" could be used without a div?

Hope you can help me work this one out!

Upvotes: 1

Views: 5697

Answers (4)

ProfileTwist
ProfileTwist

Reputation: 1554

With the new implementation of html5 <footer> is a legitimate tag just like <div> or <p>. As confusing as it may be the period . before the footer declaration constrains it to a class name instead of the tag.

So in your case: div.footer = <div> with class name footer = <div class="footer>.

There are numerous reasons why you may make such a declaration.

Sample html

<div>
  <div class="footer">Footer only</footer>
  <div>Div only</div>
  <footer>Footer tag; DIFFERENT</footer>
</div>

Example Css

div {
 border: 1px solid red;
}
.footer {
 background: blue;
 color: #fff; /* white font color */
}

Depending on what you want to do, let's use the specific div.footer examples to show what we can do.back

Inheritance

By inheritance, div.footer will inherit "3 properties" -> background, color and border from the div and .footer declarations.

Now you may want to override some of these properties so...

Overriding Property

Use something like div.footer { color: red; } this will override the white color.

Layout Insight

The beauty of css is that you can use declaration to give you "insight" on what the html markup will be laid out as.

Omitting properties I would write the css as follows:

#footer {}
#footer ul {}
#footer ul li {}
#footer p {}
#footer p a {}

The html:

<div id="footer">
 <ul>
   <li>List 1</li>
   <li>LIst 2</li>
 </ul>
 <p>Hello! Copyright <a href="#">website company name.</a></p>
</div>

You could then reverse engineer the html through just css because of the descendent character use. This maximizes the power of "cascading".

-- NOow I hope some of this has given you some insight. A few other pointers are this:

  • Typically a webpage has only one footer. When there is only one of something use the # id selector ALWAYS.
  • Use classes to not only apply styles to multiple elements but to also provide "meaning to your markup" -> go back to the principle of "layout insight" to understand what I mean.
  • div.footer should could more simply be .footer Now, it may be necessary to include div just to say "I only want to apply this class to divs only" and in that case go for it. But defining all your declarations with div.someClasName is not all that valuable.
  • DO NOT use names of tags as classnames. div.div is very confusing - especially if you are programming for a while. Therefore, since <footer> is now a legit tag you shouldn't apply it as a classname. On the other hand "#footer" could be argued differently because it can only exist once in a webpage.

Upvotes: 1

DA.
DA.

Reputation: 40673

It's about specificity. div.footer is more specific (a div with that particular class) than .footer (any element with that class).

As to when to use one or the other, it really depends on the markup and CSS you are building.

Upvotes: 0

dsgriffin
dsgriffin

Reputation: 68586

div.footer means you are targeting only <div> elements with the class .footer.

<div class="footer">This is targeted.</div>

<p class="footer">This isn't targeted, as it isn't a div with the class .footer.</p>

div .footer, however, would target all elements with the class .footer that are descendants from <div> elements.

<div><p class="footer">This is targeted.</p></div>

<section><p class="footer">But this isn't targeted.</p></section>

Upvotes: 3

faffaffaff
faffaffaff

Reputation: 3549

div.footer means the element must both BE a <div> and HAVE the class footer.

.footer would trigger for any element with class footer; for example, a <span class="footer".

Upvotes: 3

Related Questions