Why is there no space after the element when using an attribute selector ("a[class]" instead of "a [class]")?

That's just the way CSS was written. The way I imagine it is that you are putting a space between all individual elements/pseudo-classes/IDs/Classes etc. If it is something that belongs inside the element's guts, then it's close to the element, not spaced away from it. Maybe I just have an overactive imagination or something, though! haha

That's probably a good mnemonic if it's consistent! I'm just trying to draw logical connections between the various formatting rules (an equals sign instead of a colon, no space instead of a space, no commas instead of a pile of commas, etc.) so I can really understand the "why"s and therefore hopefully remember the rules better and debug less!

The equals sign is used for comparisons in CSS. The colon is for selecting pseudo-classes.

I understand that you are frustrated, but once you understand the rules of CSS, they will frustrate you no longer.

Spacing out elements in a selector statement targets child elements within those elements listed. For example, if I want to target any span that occurs within a paragraph, I can write:

p span {
//CSS here
}

That space says for CSS to find only spans that are child elements of paragraph elements.

That is completely different from targeting all paragraphs and spans, which would be:

p, span {
//CSS here
}

See the comma there? Commas are always used to separate individual things, and in CSS, it is no different. This code would now target all paragraphs and span elements on the page.

CSS just takes some getting used to. You'll get it! :)

Hi sawtoothwave,

An attribute selector, just like a class selector, can be used on its own or combined with other selectors.

Therefor, a[href="tree.house"] will select all the anchor tags with that exact href attribute. a [href="tree.house"] will only look for that href in the child elements of that anchor. Conversely, a.tree-house will target all the anchor tags with a class of "tree-house", whereas a .tree-house will only look for a class of "tree-house" among the child elements of that anchor.

Hope that helps, Cosmin

Thanks for the examples, both! I'm not too frustrated actually, just trying to understand.

I think the part that's confusing me is that if "p span" targets all spans that exist within a p tag, and a[class] targets all classes that exist within an a tag, why does the syntax demand a space between "p" and "span" but no space between "a" and "[class]"? I understand that the brackets are to signify that "class" is an attribute selector, and not an html element named "class" but I still don't quite get why it isn't written as "a [class]" instead of "a[class]".

YES that's the stuff. Thank you!