CSS Terminology: What Are These Called

CSS terminology: what are these called?

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.

CSS Terminology: What are these values called in CSS quotes property?

The quotes: CSS allows you to substitute a symbol for the open and closed quotes used within the page. See this reference for more information.

The first two values specifies the first level of quotation embedding, the next two values specifies the next level of quote embedding, etc

In your example they are using the Unicode Character References.

Correct terms and words for sections and parts of selectors

What is the correct term for the sections of CSS selectors that are separated by commas?

These are called complex selectors. The entire comma-separated list is known as a selector-list.

Within those sections, what is the term for the parts separated by combinators (spaces, +, >, etc)?

These are known as compound selectors.

So, a selector-list is made up of one or more complex selectors separated by commas, and each complex selector is made up of two main parts: compound selectors, and combinators. It can also optionally contain pseudo-elements.

Compound selectors used to have the rather convoluted name "sequence of simple selectors". Worse still, complex selectors were just called "selectors". Needless to say, I recommend using the new terms as they are much more straightforward, much less cumbersome and completely unambiguous compared to their predecessors.


And since I'm here, here are the rest of the definitions...

  • A simple selector is one fundamental component of selectors. It is any one of the following:

    • Universal selector (*), optionally with a namespace
    • Type selector (a, div, span, ul, li, etc), optionally with a namespace
    • Attribute selector ([att], [att=val], etc), optionally with a namespace
    • Class selector (.class)
    • ID selector (#id)
    • Pseudo-class (:pseudo-class)
  • As answered above, a compound selector (formerly a "sequence of simple selectors") is a chain of simple selectors not separated by a combinator:

    a:not([rel="external"]):hover
  • A combinator is another fundamental component of selectors. It is a symbol or token that separates two compound selectors, establishing in its place a relationship between the two elements represented by the two compound selectors. There are currently four combinators in use today:

    • Descendant combinator:

      article p
    • Child combinator:

      /* 
      * The extra spaces in between are whitespace,
      * and are therefore insignificant.
      */
      ul > li
    • Adjacent sibling combinator:

      header + section
    • General sibling combinator:

      h2 ~ p

    More combinators may be introduced in later specifications.

  • And a complex selector (formerly just "selector") is a complete string made up of compound selectors linked by combinators:

    nav[role="main"] > ul:first-child > li
  • The subject of a complex selector is its last, or only, compound selector, representing the element that will be matched or styled. In the above example, the subject of the selector is li.

  • The term selector has been generalized, so it may now refer to any of the following for the purposes of simplicity and brevity, and which one it's referring to at any given moment should be gleaned from context:

    • Simple selector
    • Compound selector
    • Complex selector
    • Selector-list (e.g. the "selector" component of a style rule)

Some personal notes:

  • The term "key selector" was coined by browser vendors for use with selector implementations, and is not an official term. It is often used to mean "subject of the selector" however, because implementations happen to use the subject of the selector as the key for the purposes of determining matches.

  • The term "pseudo-selector" was coined by authors to mix pseudo-classes and pseudo-elements, and is not an official, or indeed meaningful, term. Although you can find it in some early-stage W3C CSS2/3 drafts, that was probably a mistake. Please don't use this term, as it needlessly creates confusion by attempting to group two completely different concepts into a single umbrella term.

  • Pseudo-elements (::pseudo-element) are not simple selectors, and therefore cannot appear in places where only actual elements may be matched. However, they are still considered selectors for the purposes of CSS parsing, and as stated above currently can appear at the end of any complex selector in a list (i.e. at the end of the last, or only, compound selector of each complex selector).

  • In CSS, a typical style rule (formerly "ruleset") consists of a selector and a declaration block.

  • Namespace prefixes are not selectors in their own right, but they may be applied to type selectors, universal selectors and attribute selectors to match components in a document that are (or are not) namespaced.

  • The specificity of a selector currently only refers to that of a single complex selector. When matching rules, any of the complex selectors in a list that match a given element will be considered for specificity calculations. If more than one complex selector matches an element, the most specific one will be used for calculations.

    Specificity will be a more complicated issue with some level 4 selectors, such as :is() and the enhanced :not(), and the of S notation in the enhanced :nth-child() pseudo.

CSS terminology: what's this called in a property value?

Generically, they're just called "<whatever> notations"; see this part of the spec for example:

The image() function allows an author to:

  • use media fragments to clip out a portion of an image
  • specify fallback images in case the preferred image can't be decoded or is a type that > the browser doesn't recognize
  • use a solid color as an image
  • annotate an image with a directionality

The image() notation is defined as:

<image-list> = image( [ <image-decl> , ]* [ <image-decl> | <color> ] )
<image-decl> = [ <url> | <string> | <element-reference> ]

Each <string> or <url> inside image() represents an image, just as if the url() notation had been used. As usual for URLs in CSS, relative URLs are resolved to an absolute URL (as described in Values & Units [CSS3VAL]) when a specified image() value is computed.

So url('bg.png') is the url() notation. However, you can get more specific. Values that represent images, such as:

  • linear-gradient(red, white)
  • url('../images/hello.png')
  • radial-gradient(orange, yellow)
  • cross-fade(image1, image2)

Are called image values. This applies to things like rect(), too, which is a shape value1. As for calc(), that's just generally called an expression, I believe.

1 Note that in the sidebar, rect() is also referred to as a function.

What is the correct terminology for this kind of CSS declaration .myClass div?

They are called Descendant Selectors, see here for more information and other terms

Just in case the W3 site ever goes down ;) here are the important parts:

At times, authors may want selectors to match an element that is the
descendant of another element in the document tree (e.g., "Match those
EM elements that are contained by an H1 element").

Descendant selectors express such a relationship in a pattern. A descendant
selector is made up of two or more selectors separated by white space.
A descendant selector of the form "A B" matches when an element B is
an arbitrary descendant of some ancestor element A.


Example (also quoted from the site linked above):

For example, consider the following rules:

h1 { color: red }
em { color: red }

Although the intention of these rules is to add emphasis to text by changing its color, the effect will be lost in a case such as:

<H1>This headline is <EM>very</EM> important</H1>

We address this case by supplementing the previous rules with a rule that sets the text color to blue whenever an EM occurs anywhere within an H1:

h1 { color: red }
em { color: red }
h1 em { color: blue }

Correct terminology for overall and specific style type properties in CSS?

Properties like background or padding that set multiple other properties are called shorthand properties.

How do you read !important in CSS?

an "!important" declaration (the delimiter token "!" and keyword
"important" follow the declaration) takes precedence over a normal
declaration.

http://www.w3.org/TR/CSS2/cascade.html#important-rules

Basically, where two style rules are the same... it gives the one marked !important greater importance and will apply those styles.

Example

div{
opacity:0 !important;
}

div.jason{
opacity:1;
}

The first rule would be applied even though the second rule is more specific (one element + one class as opposed to one element)

Note: IE6 ignores !important when you have two of the same property and one of them is important - it'll always apply the last declaration, whether or not it was marked important. **Added from @BoltClock's comment below.

Warning: !important is a hammer that should only be used when absolutely necessary. Almost always, it is better to use more specific selectors to achieve greater specificity and have your styles applied the way you want. !important can make it very difficult for future developers to find and make changes to your code.

One good use case: !important is great for user-defined styles, where a user wants to manipulate Web site pages in specific way in his browser (say make all the backgrounds black and the text yellow). Without having to worry about specificity, the user can add styles to certain elements (like body) and make the styles render.

How are these called? literals, captions, labels or properties?

They are called resource strings, on many platforms, independent of what you are using them for. There isn't a general name for the individual resource strings related to localization. The general term for all of those resource strings together is called localization.

What is name of the technique that adds CSS classes to an element?

HTML editing isn't really programming, exactly. HTML is a Markup language and that means you are marking up content. Markup is just really nouns and adjectives without any verbs or adverbs. Programming is making your content do something by putting some verbs on those nouns.

Adding a class to the markup would be meta information about that content. You may have heard of separating the description of your styles using meta attributes like classes as "being semantic" or something like a separation of style and content.

If you use a programming language like JavaScript to change the content or meta attributes, that is sometimes referred to as DOM Scripting.



Related Topics



Leave a reply



Submit