CSS Selectors | Class and ID Selectors

css_class_and_id_selector

CSS Class Selector

Class selector using (.) dot notation can be used to select elements that have a class attribute containing a specific value or values.The name of the class value must immediately follow the dot (.)

*.design { color: gray } OR .desig { color: gray }
  /* to set a color for all elements with "design" class */

p.design { color: gray }
  /* to set a color for "p" elements with "design" class */
<p class="design">Web Design</p>
p.design.develop { color: gray }
/* to set a color for "p" elements with "design" 
and white separated with develop class */
<p class="design develop">Web Designing & Development</p>

CSS ID Selector

ID selector using “hash notation” can be used to select elements that have an ID containing a specific value or values. The name of the ID value must immediately follow the octothorpe (#).  An ID typed attribute can be used to uniquely identify its element. There is no two such attributes can have the same value in a conforming document.

*#testing { color: red } OR #testing { color: red }
  /* to set a color for all elements with "testing" id */

p#testing { color: red }
  /* to set a color for "p" elements with "testing" id */
<p id="testing">Web Testing</p>

CSS Attribute Selector | CSS Selectors

CSS Attribute Selector

Attribute selectors select every element with the attribute specified within square brackets{}. An attribute type or an attribute with a specific value can be styled with them.

Existing Attribute Selectors :

  • [attributename]
  • [attributename="val"]
  • [attributename~="val"]
  • [attributename|="val"]
  • [attributename^="val"]
  • [attributename$="val"]
  • [attributename*="val"]

1.[attributename]

This selector will match only input elements that use the type attribute, such as the following element:

input[type] {}
<input type="text">

2. [attributename="val"] /* Exact(match) Attribute Value Selector */

 It will match by both attribute and value. If you want to be more specific, use the “equality” attribute selector.

input[type="textarea"] {}
<input type="textarea">

3.[attributename~="val"] /* Delimited value selector - Whitespace */

The elements whose attribute value contains the given word among a space-separated list of words like  value should be  (rel = “language2 language”).

a[rel~="language"]{}
<a rel="language2 language" href="#"> Link </a> <!-- Matches the second word "language" -->

4.[attributename|="val"] /* Language attribute selector */

This selector is used to match the lang attribute. This selector will match any elements whose lang attribute value begins with “es”, including “es-ES”, “es-MX”.

p[lang|="es-ES"] {}
<p lang="es-ES">Spain</p>
<p lang="es-MX">Mexico</p>

5.[attributename^="val"] /* Value start selector */

This attribute value begins with the specified string.

a[title^='image'] {...}
<a title="image"></a>

6.[attributename$="val"] /* Ending Selector */

This attribute value ends with the specified string.

a[title$='2'] {...}
<a title="image 2"></a>

7.[attributename*="val"] /* Arbitrary Selector */

This attribute value contains the specified substring.

a[title*="image"] {}
<a title="source image link"></a>

CSS Universal Selector | CSS Selectors

CSS Universal Selector

The universal selector will select groups of elements and apply a style rule. The symbol for the universal selector is the asterisk (*). For example, to set a default color for all elements within a file, use the following rule:

* {color: blue;}

You can also use the universal selector to select all children of an element. For example, the
following rule sets all elements within a <div> element to a sans-serif typeface:

p * {font-family: Arial;}

The universal selector is always overridden by more specific selectors. The following style rules show a universal selector along with other rules that have more specific selectors. In this example, the <a>  rules override the universal selector.

* {color: purple;}  /* Universal Selector */ 
a {color: red;} /* Specific Selector */

Types of CSS Selectors | CSS

CSS SELECTORS

Selectors  are used to define rules that apply to only a selected set of HTML elements. Selector identifies those markup elements to which the CSS style(s) will be applied.

Types of CSS Selectors:

  • Universal Selector
  • Attribute Selector
  • Class Selector
  • ID Selector
  • Pseudo-classes
    • Dynamic pseudo-classes
    • The target pseudo-class
    • The language pseudo-class
    • Structural pseudo-classes
    • The negation pseudo-class
  • Combinators 
    • Descendant combinator
    • Child combinator
    • Adjacent sibling combinator
    • General sibling combinator