CODEWITHSUNDEEP
csscss-selectors
kfirba
kfirba

Reputation: 5441

What difference does the space make between 2 ways to declare styles rule

What's the functional difference between these 2 declerations:

#someID.SomeClass a

and

#someID .SomeClass a

All the format difference is inserting a space between the #someID and .SomeClass. When I'm watching tutorials, people sometimes do the space, sometimes not, so I'm not sure whether it means something or just a code designing.

Thanks!

Upvotes: 3

Views: 107

Answers (4)

lloan
lloan

Reputation: 1403

This is from w3.org - Very interesting read (example)

To match a subset of "class" values, each value must be preceded by a ".".

For example, the following rule matches any P element whose "class" attribute has been assigned a list of space-separated values that includes "pastoral" and "marine":

p.marine.pastoral { color: green }

This rule matches when class="pastoral blue aqua marine" but does not match for class="pastoral blue".

Note. CSS gives so much power to the "class" attribute, that authors could conceivably design their own "document language" based on elements with almost no associated presentation (such as DIV and SPAN in HTML) and assigning style information through the "class" attribute. Authors should avoid this practice since the structural elements of a document language often have recognized and accepted meanings and author-defined classes may not.

Note: If an element has multiple class attributes, their values must be concatenated with spaces between the values before searching for the class. As of this time the working group is not aware of any manner in which this situation can be reached, however, so this behavior is explicitly non-normative in this specification.

Upvotes: 1

lurker
lurker

Reputation: 58244

#someID.someClass a

Would select eh element a above. But it would not select the element in the example below.

This one indicates that the someClass is a class of the same element that has id someID. And then contained within this element (any number of levels down) would be the element a.

Example:

<div id="someID" class="someClass">
  ...
  <a ...> </a>
</div>

#someID .someClass a

This one indicates you have an element with id someID and then some number of levels down there's an element of class someClass and finally, some further levels down, you have the element a.

Example:

<div id="someID">
  ...
  <div class="someClass">
    ...
    <a ...> ... </a>
  </div>
</div>

Would select the element a above.

Upvotes: 5

Don
Don

Reputation: 4157

#someID.SomeClass a signifies an a tag under an element with both someID as the id and also SomeClass for a class whereas, #someID .SomeClass a signifies an a tag under some element with "SomeClass" which itself is under another element with "someID"

Upvotes: 1

bwoebi
bwoebi

Reputation: 23777

#someID.SomeClass selects the element with the id someID and the class SomeClass.

#someID .SomeClass selects the element with the class SomeClass and has a parent whose id is someID.

Upvotes: 6

Related Questions