CODEWITHSUNDEEP
javascriptcssdom
Brian
Brian

Reputation: 2778

JavaScript/DOM - Is there a difference between a "CSS Selector" and an attribute?

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?

Upvotes: 0

Views: 465

Answers (4)

numbers1311407
numbers1311407

Reputation: 34072

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.

Upvotes: 2

theprogrammer
theprogrammer

Reputation: 2734

Actually selectors use attributes (and tag names) and classes and pseudo-classes.

Selectors are of different types from universal to more specific ones.

See: http://www.w3.org/TR/CSS2/selector.html

So you can use your attributes to build a pattern (a selector) to apply a rule to it. (Or to find the element in the DOM if using some parsing library like JQuery).

What selectors you can use depend a little on the CSS engine implementation, some browsers don't recognize some pseudo-classes for example.

Upvotes: 1

Kyle
Kyle

Reputation: 67244

A CSS selector is used within the CSS document. It is the string which selects the element you wish to style, by element name, id, css or whatever else.

.myDiv, #myDivid are selectors.

"my-data-node-type" could be used to select your element, #myDiv a[my-data-node-type='1']

Attributes are what you use to style the element itself.

#myDiv a[my-data-node-type='1']
{
    color: #000; /*this is an attribute*/
}

Hope this helps.

Upvotes: 1

Will Reese
Will Reese

Reputation: 2841

A css selector is just a way that css identifies groups of elements to apply styles to. An attribute is a property of an element.

In your example, my-data-node-type='1' is an attribute. Attributes can be used as part of css selectors however. a[my-data-node-type="1"] will select all 'a' tags with my-data-node-type=1.

Upvotes: 1

Related Questions