Question

Excluding declarative event handlers:

<a href='#' onclick=<handler> ... />

Is there any material difference between an Attribute and a CSS Selector? If I provide my own attribute:

<a href='#' my-data-node-type='1'/>

Is “my-data-node-type” an attribute, a CSS Selector or both? I think what I’m really asking here is, are the terms “attribute” and “css selector” synonymous? Or is a “css selector” only an attribute recognized by CSS as eligible for styling?

Answer 1

CSS selectors are not attributes. They’re patterns used to decide which elements to apply styles to in the document.

From the w3c: http://www.w3.org/TR/CSS2/selector.html

“In CSS, pattern matching rules determine which style rules apply to elements in the document tree. These patterns, called selectors, may range from simple element names to rich contextual patterns. If all conditions in the pattern are true for a certain element, the selector matches the element.”

In your case, the attribute name “my-data-node-type” may be used as part of a CSS selector to reference your link, but a CSS selector is not an attribute. Attributes aren’t part of CSS, they’re the name/value pairs of data you’ll find within element tags in HTML and other like markup languages, for example.

<element my-attribute-name="my-attribute-value" />

It’s not the standard, but the HTML Wikipedia page has a nice plain language description of attributes: http://en.wikipedia.org/wiki/Html

For example, given the HTML:

<div id="foo">
  <a data-node-type="foo" href="bar">Click me!</a>
</div>

“data-node-type” and “href” are the attributes of the <a> tag,

# while:
div#foo a[data-node-type=foo] 

# or:
div a[href]

# or simply:
a

…are CSS selectors which would target that <a>, with the first two making use of its attributes.