Basic selectors

Basic selectors include:

• universal selector, allows to select all elements
• element name selector, allows to select by the html element name
• class name selector, allows to select by class name
• ID selector, allows to select by value of its id attribute
• attribute selector, allows to select all elements that have the given attribute

Universal selector

Sign * used as universal selector, that allows to select all elements. Below rule makes text color red for all elements.

 * {
color: red;
}

Selector by element name

Allows to select by the html element name.

Selector by class name

Allows to select by class name. Class name in css rule begins with dot sign.

/* makes red border and size 64 pixels 
for every element with class name borderbox64 */
.borderbox64 {
  border-style:solid;
  border-width:1px;
  border-color: red;
  width: 64px;
  height: 64px; 
}

<div class="borderbox64" ></div>

Selector by id value

Allows to select by value of its id attribute. Id value in selector begins with # sign.

/* makes red border and size 64 pixels 
for every element with class name borderbox64 */
#redbox64 {
  outline-color: red;
  outline-style: solid;
  width: 64px;
  height: 64px; 
}

<div id="redbox" ></div>

Attribute selector

Selects all elements that have the given attribute. You can use one of the followed syntax:

• [attr] - to select all the elements that have the specified attribute
• [attr=value] - to select all the elements whose attribute has the value exactly same as the specified value.
• [attr~=value] - to select all the elements whose attribute value is a list of space-separated values, one of which is exactly equal to the specified value.
• [attr|=value] - to select all the elements whose attribute has a hyphen-separated list of values beginning with the specified value. The value has to be a whole word either alone or followed by a hyphen.
• [attr^=value] - to select all the elements whose attribute value begins with the specified value. The value doesn’t need to be a whole word.
• [attr$=value] - to select all the elements whose attribute value ends with the specified value. The value doesn’t need to be a whole word.
• [attr*=value] - to select all the elements whose attribute value contains the specified value present anywhere. The value doesn’t need to be a whole word.