CSS Difference Between Attribute Selectors with Tilde and Star

Input	Matches *=bar
foo	No
foobar	Yes
foo bar	Yes
foo barbaz	Yes
foo bar baz	Yes

What is the difference between | and ^ Selector?

You can check the difference by yourself. They both look for attribute values starting with some value. However, using |= you need the whole word (or the word separated by a hyphen - from the next word) to be selected. Example:

<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>

[class^="top"] will select the three of them.

[class|="top"] will select only the two first elements. The last <p> has the class topcontent and therefore the selector won't find the isolated word top

What does the ~ (tilde/squiggle/twiddle) CSS selector mean?

The ~ selector is in fact the subsequent-sibling combinator (previously called general sibling combinator until 2017):

The subsequent-sibling combinator is made of the "tilde" (U+007E, ~)
character that separates two sequences of simple selectors. The
elements represented by the two sequences share the same parent in the
document tree and the element represented by the first sequence
precedes (not necessarily immediately) the element represented by the
second one.

Consider the following example:

.a ~ .b {
  background-color: powderblue;
}

<ul>
  <li class="b">1st</li>
  <li class="a">2nd</li>
  <li>3rd</li>
  <li class="b">4th</li>
  <li class="b">5th</li>
</ul>

CSS Attribute Selectors role*=user

The selector is targetting any anchor tag [a] which its href attribute doesn't start with stage [:not([href^=stage])]; that, is inside the an article, which is a direct child > of an element on which its role attribute contains user.

In the example bellow I styled the targets with a pinky color so that it can give an idea of what elements are selected by that:

[role*=user] > article a:not([href^=stage]) { 

    color: fuchsia;

}

<div role="user">

  <article>

    <a href="stage">loren</a> ipsum dolor <a href="not-stage">sit amet</a>

  </article>

</div>

Why use an attribute selector to match classes?

The [] syntax is an attribute selector.

a[class="btn"]

This will select any <a> tag with class="btn". However, it will not select <a> which has class="btn btn_red", for example (whereas a.btn would). It only exactly matches that attribute.

You may want to read The 30 CSS Selectors you Must Memorize. It's invaluable to any up-and-coming web developer.

CSS substring matching attribute selectors: Contains multiple class names

The selector you're looking for is as follows, see this question for more details.

td[class*="foo"][class*="bar"]

However, if you need to use selectors like that then it's often a sign that your class name logic is bad.

CSS attribute selectors: The rules on quotes ( , ' or none?)

I’ve written more extensively on the subject here: Unquoted attribute values in HTML and CSS.

I’ve also created a tool to help you answer your question: http://mothereff.in/unquoted-attributes

You can usually omit the quotes as long as the attribute value is alphanumeric (however, there are some exceptions — see the linked article for all the details). Anyhow, I find it to be good practice to add the quotes anyway in case you need them, i.e. a[href^=http://] won’t work, but a[href^="http://"] will.

The article I mentioned links to the appropriate chapters in the CSS spec.

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.

Difference between . and # in CSS

# is an ID selector. . is a class selector. It's like comparing, say, a precision tweezer with a shovel.

There can only be one element with a given ID on the page, giving the # selector a much higher precedence than classes.

---

Related Topics