Need Help Understanding This (#some id .some class)

[Planet13]

Hi all,

I know some basic CSS.

But please help me understand what it means when you see a DIV id followed by a class, such as:

#some_id .some_class { color: red;}

How exactly does that differ from simply doing:

#some_id { color: red;}

or just using the class alone:

.some_class { color: red;}

In what instances would you use both the ID AND the class?

Thanks in advance.

[not2easy]

Probably because #id can only be used for one element on a page and the same css file is used sitewide or for multiple pages. On the page in question the element contents will be red, they are using a class just for setting a color. On a different page they may want the same id element to be blue or yellow or green and this way they can do that without a new unique id, keeping the css file smaller.

[Planet13]

Thanks for the response, not2easy:

On the other hand, I wonder if I am just over-thinking it.

Maybe it is just shorthand for doing this:

#some_id {color:red;}
.some_class {color:red;}

Where (just by coincidence) an ID and a class just happen to have an element in common (in this case, they both just happen to have a text color of red).

~~~~~

Or is it a conditional? Meaning, that the color of .some_class is dependent upon the ID of the element to which it is applied?

So does this make sense:

#some_id .some_class { color: red;}

#different_id .some_class { color: blue;}

Meaning that when .some_class is applied to a DIV with the ID of some_id, the text color will be red. But when .some_class is applied to a DIV with the ID of different_id, the text color will be blue?

[not2easy]

Yes, that's another way to put it. It allows more flexibility. What I was describing is the flip side:
#some_id .someother_class { color: blue;}

[rainborick]

Read this CSS Selectors Tutorial [code.tutsplus.com]. It's clear, concise, and comprehensive. I promise that you'll come away feeling much more confident in your use of stylesheets.

[lucy24]

Brutal answer: it may also be sloppy coding. If things are nested six deep (I've seen far worse), it's definitely bad coding.

Loosely translated, the nesting means "If a div class blahblah comes inside div id otherblahblah, do as follows". This is meaningful if
(a) the default styling for stuff inside id blahblah-- for example, links in a #header block-- has been set, and you want to override it for one subsection
or
(b) you've got a recurring classname all over your document, and you want it to look different inside the #blahblah area, but there's some strong semantic reason for still calling the class by the same name.

If the styling for #blahblah says nothing about color, then there is no need to specify

#blahblah .otherblah

unless you're in the realm of option (b) where you've got styling elsewhere for

.otherblah

that does specify a (different) color.

Don't constrain things any tighter than you have to. And there's always, always an alternative to !important

[Planet13]

Thanks for the input, everyone:

Ok, let me give some real world examples from elegant themes Divi theme:

Example 1 (Two classes without a comma separating)

.et-fixed-header .et-search-form { top: 26px; }

Is the above example the same thing as this WITH a comma?

.et-fixed-header, .et-search-form { top: 26px; }

Or does removing the comma give it a different meaning?

---

Example 2: Having the class BEFORE an ID:

.et-fixed-header #et_search_icon:before { margin-top: -8px; }

Would that be the same, or different than switching the id with the class?

#et_search_icon:before .et-fixed-header { margin-top: -8px; }

---

Example : having a type / element appended by TWO .class not-separated by commas.

form.et-search-form.et-hidden { display: none !important; }

Again, would that be different from, say:

with a space between classes:

form.et-search-form .et-hidden { display: none !important; } 

Thanks in advance, and sorry if the examples are not clear.

And really, even if yu could just explain to me if they are a particular kind of selector, just let me know the name so I can research some more.

Thanks.

[lucy24]

Is the above example the same thing as this WITH a comma?

NO.

A comma means: apply this set of styles to these two (or more) entirely separate things. In CSS, commas indicate lists. You'll also see commas inside the {style} -- for example if you're listing a series of fonts in order of preference.

A space without a comma means: the styles only apply if the stuff after the space comes inside the stuff before the space. It can be anywhere inside, not just immediately after. The formal term is "descendant" (as opposed to "child", expressed with a > sign in place of the space). Unlike, ahem, some formal terminologies, this should be a pretty useful way of looking at things.

p.classname
= any paragraph with name "classname"

<p class = "classname">text-here

p .classname
= any paragraph inside some other element of class "classname", for example

<div class = "classname">
<p>text-here

but also

<div class = "classname">
<div class = "some-other-name">
<ul>
<li>
<p>text-here

p, .classname
= any paragraph (regardless of class) OR any element (of any kind) with name "classname"

I think this answer by itself will also cover your other two questions.

[Planet13]

Thank You, Lucy!