What Is That Thing Between CSS "Selectors" Called

What is that thing between CSS selectors called?

According to https://www.w3.org/TR/selectors-3/#combinators they are called "combinators".

1. (space character) = descendant combinator
2. > (angle bracket or greater-than sign) = child combinator
3. + (plus mark) = adjacent sibling combinator
4. ~ (tilde) = general sibling combinator

What are these CSS ... 'titles/selectors' called?

The entire sequence .img > border > div > #select is usually simply called a selector, since it's the part of the CSS rule that selects elements to apply the rule to. There is an entire specification devoted to selectors however; CSS just describes the role of a selector in a CSS rule.

> is a combinator, specifically the child combinator. Combinators are used to express relationships between two elements, in this case a parent-child relationship: .parent > .child. The rest, .img, border, div and #select are all simple selectors of various kinds.

A typical selector is made up of simple selectors and combinators. You can have a selector with just one simple selector .child, multiple simple selectors div.child, combinators #parent > div.child, or any combination of those.

What is the difference between ' ' and a space in CSS selectors?

A > B will only select B that are direct children to A (that is, there are no other elements inbetween).

A B will select any B that are inside A, even if there are other elements between them.

In CSS what is the difference between . and # when declaring a set of styles?

Yes, they are different...

# is an id selector, used to target a single specific element with a unique id, but . is a class selector used to target multiple elements with a particular class. To put it another way:

• #foo {} will style the single element declared with an attribute id="foo"
• .foo {} will style all elements with an attribute class="foo" (you can have multiple classes assigned to an element too, just separate them with spaces, e.g. class="foo bar")

Typical uses

Generally speaking, you use # for styling something you know is only going to appear once, for example, things like high level layout divs such sidebars, banner areas etc.

Classes are used where the style is repeated, e.g. say you head a special form of header for error messages, you could create a style h1.error {} which would only apply to <h1 class="error">

Specificity

Another aspect where selectors differ is in their specificity - an id selector is deemed to be more specific than class selector. This means that where styles conflict on an element, the ones defined with the more specific selector will override less specific selectors. For example, given <div id="sidebar" class="box"> any rules for #sidebar with override conflicting rules for .box

Learn more about CSS selectors

See Selectutorial for more great primers on CSS selectors - they are incredibly powerful, and if your conception is simply that "# is used for DIVs" you'd do well to read up on exactly how to use CSS more effectively.

EDIT: Looks like Selectutorial might have gone to the big website in the sky, so try this archive link instead.

CSS Selectors - difference between and when to use , + or

In CSS these are called Combinators and means three different things:

1. div > .class: is called Child selector and will select all elements that are direct children of a div and have the class .class.

2. div .class: is called Descendant selectors and will select all elements inside a div and having the class .class.

3. div + .class: is called Adjacent sibling selector and will match any element that immediately follows a div and have the class .class.

Example:

In the following example:

<div>
  <p class="test">
    <a href="#" class="test">
      Testing link</a>
    <img class="test"/>
  </p>
  <span class="test">A span</span>
</div>
<h4 class="test">A title</h4>

• div > .test will match only <p> and <span> elements.
• div .test will match <p>, <a>, <img> and <span> elements.
• div + .test will match only <h4> element because it follows the <div> immediately.

Demo:

div .test {

  background: yellow;

}

div>.test {

  background: red;

}

div+.test {

  background: green;

}

<div>

  <p class="test">

    Pragraph

    <a href="#" class="test">

      link</a>

    <img class="test" width="50px" height="50px" />

  </p>

  <span class="test">Span</span>

</div>

<h4 class="test">Title</h4>

What do commas and spaces in multiple classes mean in CSS?

.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

That says "make all .grid_6's within .container_12's and all .grid_8's within .container_16's 460 pixels wide." So both of the following will render the same:

<div class="container_12">
  <div class="grid_6">460px Wide</div>
</div>
<div class="container_16">
  <div class="grid_8">460px Wide</div>
</div>

As for the commas, it's applying one rule to multiple classes, like this.

.blueCheese, .blueBike {
  color:blue;
}

It's functionally equivalent to:

.blueCheese { color:blue }
.blueBike { color:blue }

But cuts down on verbosity.

What does the dot mean in CSS?

A . prefix usually represents a class selector, but if it's immediately followed by whitespace then it's a syntax error.

If I were to hazard a guess, then it's likely the author meant to say .work-container > h3, but missed the Shift key just as he was about to type the > character (the child combinator).

Your second selector, .work-container h3, simply means any h3 that's contained within an element with a class called work-container.

What does the (greater-than sign) CSS selector mean?

> is the child combinator, sometimes mistakenly called the direct descendant combinator.¹

That means the selector div > p.some_class only matches paragraphs of .some_class that are nested directly inside a div, and not any paragraphs that are nested further within. This implies that every element matching div > p.some_class necessarily also matches div p.some_class, with the descendant combinator (space), so the two are understandably often confused.

An illustration comparing the child combinator with the descendant combinator:

div > p.some_class { 
    background: yellow;
}

div p.some_class { 
    color: red;
}

<div>
    <p class="some_class">Some text here</p>     <!-- [1] div > p.some_class, div p.some_class -->
    <blockquote>
        <p class="some_class">More text here</p> <!-- [2] div p.some_class -->
    </blockquote>
</div>

What does the + (plus sign) CSS selector mean?

See adjacent selectors on W3.org.

In this case, the selector means that the style applies only to paragraphs directly following another paragraph.

A plain p selector would apply the style to every paragraph in the page.

---

This will only work on IE7 or above. In IE6, the style will not be applied to any elements. This also goes for the > combinator, by the way.

See also Microsoft's overview for CSS compatibility in Internet Explorer.

CSS difference between attribute selectors with tilde and star?

The asterisk attribute selector *= matches any substring occurrence. You can think of it as a string contains call.

---