What Does a CSS Selector in Square Brackets Select in HTML

What does a CSS selector in square brackets select in HTML?

For the selector to work:

<div text-uppercase></div>

[text-uppercase] selector matches an attribute on a tag.

What do square brackets in class names mean?

That is most likely used by some sort of validator or validation library. The class here means that validate this field denoted by validate keyword and then:

required it is required field

custom validation type; allow only letters

length should be between 0 to 100 chars

Well, this information is used by the jQuery validation library you posted the link to :)

Brackets square html css

The brackets are called "attribute selectors" and don't have any effect on the css or html itself, but are used to select elements with more specificity than class names or id's. In my mind, I associate them with a regex to help remember what they do. While you may not need them, they can be super useful! When using bootstrap, I often use [class*="col-"] to select all classes that start with col- (i.e. col-xs-12 or col-md-3) so that I can change the default styles of bootstrap's grid in certain situations. Here's a similar question that may help! Why use an attribute selector to match classes?

What are the Square Brackets around the class name?

Grouping related classes in your markup where the square brackets could be used to group.
Please, read this Grouping related classes in your markup

How to get html tag attribute with square brackets using css selector?

Using xpath to get a list of all text from elements with telephone as itemprop.

faxnum = None
telnum = None
numbers = response.xpath('//span[@itemprop="telephone"]')
for element in numbers:
    text = element.extract()
    if re.search('revealmainfax', text):
        faxnum = element.xpath('./text()')
    else:
        telnum = element.xpath('./text()')

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.

Strange CSS code, Brackets and Asterisk

Attribute Selector: (the selector with square braces)

This - [class*="col-"] is called as an attribute selector. It is used to select an element based on an attribute and its value. In this case it selects all elements whose class contains col-. So, it would apply the style to .col-1, .col-2, .col-3 etc.

From the W3C Spec: (Section 6.3.2. Substring matching attribute selectors)

[att*=val]

Represents an element with the att attribute whose value contains at least one instance of the substring "val". If "val" is the empty string then the selector does not represent anything.

^{(emphasis is mine)}

Universal Selector: (the styles which are under *)

The * selector is called as the universal selector and it is used to select and apply given styles to all elements.

From the W3C Spec:

The universal selector, written as a CSS qualified name [CSS3NAMESPACE] with an asterisk (* U+002A) as the local name, represents the qualified name of any element type. It represents any single element in the document tree in any namespace (including those without a namespace) if no default namespace has been specified for selectors. If a default namespace has been specified, see Universal selector and Namespaces below.

---

In your code, there are some styles which are column to all three col-* classes whereas the width is different. So, the [class*="col-"] selects elements with one of those three classes and adds the common styling to them whereas the individual .col-1, .col-2, .col-3 selectors apply the width specific to each class.

* { /* select and apply these styles to ALL elements */
  box-sizing: border-box;
}

[class*="col-"] { /* select all elements whose class contains col- */
  float: left;
  padding: 15px;
  border: 1px solid red;
}

/* select elements with specific class */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}

---

It is more like a regex for selector but you should be careful while using them because [class*="col-"] will also select an element whose class='fevicol-is-an-adhesive' like in the below snippet.

[class*="col-"] {

  color: red;

}

<h3>Items that will be selected</h3>

<div class='col-1'>Column 1</div>

<div class='col-2'>Column 2</div>

<div class='col-3'>Column 3</div>

<div class='fevicol-is-an-adhesive'>Fevicol is an adhesive</div>

<h3>Items that will not be selected</h3>

<div class='cols-1'>Column 1</div>

<div class='col2'>Column 2</div>

<div class='column-3'>Column 3</div>

<div class='fevicol'>Fevicol is an adhesive</div>

---

Related Topics