CSS terminology: what are these called?

Question

Consider:

p {
  ...
}

.foo {
  ...
}

#bar {
  ...
}

What is the correct name for these statements in CSS? I\'ve seen them called selectors, rules or rule

Answer 1

A rule would be considered:

p {…}

A selector in this case is:

p

A rule is made up of selectors and declarations. A declaration is property:value so the entire rule would be:

selector { property:value }

A rule can have multiple declarations and multiple selectors so we can actually have:

selector, selector2
{
  property:value;
  property2:value;
} 

A rule set would be multiple rules.

Here's a quick source on this or the CSS 1 Specification.

Answer 2

I usually call them rules or classes.

Answer 3

In this example:

p.class, #id > a {
foo:bar;
}

p, #id > a is group of selectors. p.class and #id are selectors. Selectors are built from simple selectors and combinators: p is a type selector, .class is a class selector (not a class). Combinators are '+', '>', '', etc.

selectors {...} is a rule. It's a mistake to call it class.

foo:bar is a declaration for foo property.

http://www.w3.org/TR/CSS2/grammar.html

Answer 4

They are selectors - see W3C specification

Answer 5

According to the specification, they are called Selectors.

Answer 6

CSS rules: Selector, Declaration Block, Property, Declaration, and Declared value.