CSS: SELECTORS AND SPECIFICITY

When starting out with CSS, one will soon discover that there are more selectors than by ID'S, Classes, tags

Type Selectors
Purpose Selectors Examples Descriptions
The Type selector will select all elements that has the tag name irrespective of their nesting levels Paragraph tag p {...} Select all <p> tags
Heading tag h1 {...} Selects all <h1> tags
Table tag table {...} Selects all <table> tags
Image tags img {...} Selects all <img> tags


Class and ID Selectors
Purpose Selectors Examples Descriptions
Class selectors are prefixed with a period (.) and having a marching name in the HTML. While ID selectors are prefixed with a hashtag (#) and to be used to style only one single element and there needs to be a matching name in the HTML. .className .topbox {...} This selects all elements with class = "topbox"
.className .nav {...} Selects all elements with class = "nav"
#idNname #header {...} Selects the element with id = "header" in the html
#idNname #studioFlat {...} Selects the element with id = "studioFlat" in the html


Group Selectors
Purpose Selectors Examples Descriptions
The Group selector combines multiple elements that are not related to give the same style, instead of styling separately so as to reduce length of codes element,element (separated by comma (,)) p,h2,span {...} Select all <p> <h2> <span> tags


Space or Descendant Selectors
Purpose Selectors Examples Descriptions
This will select tag or descendant that is inside of another tag even if there are other elements nested as well. It does not have to be a direct child of the tag tag tag (separated by space) ul li {...} This selects any <li> tag that is inside the <ul> tag
tag tag (separated by space) nav a {...} This selects any <a> tag that is inside the <nav> tag


Child Selectors
Purpose Selectors Examples Descriptions
This will select tag that is a direct child of the parent tag tag > tag (separated right angled bracket) h1 > span {...} This selects the <span> tag that is a direct child inside of <h1> parent tag
tag > tag (separated right angled bracket) footer > .copyright {...} This select the class name "copyright" tag that is directly inside the <footer> tag


Attribute Selectors
Purpose Selectors Examples Descriptions
This will select the tag that has attributes associated with it. The attribute portion is always contained in a bracket [] and is the attribute that is being selected not value tag[attribute] div id="header" will be div[id] {...} This selects any <div> tag with id
tag[attribute] span class="deck" will be span[deck] {...} This selects any <span> tag with deck
a[title] {...}
  • < a href="http://google.com" title="google" I am a link> </a>

  • < a href="http://google.com" title="search engine" I am a link> </a>
 This selects any <a> tag with title attribute
a[title="search engine"] {...}
  • < a href="http://google.com" title="google" I am a link> </a>

  • < a href="http://google.com" title="search engine" I am a link> </a>
 This selects the <a> tag with title attribute of search engine


Specificity
Purpose Scores Examples Descriptions
When there are 2 or more IDENTICAL SELECTORS ponting to DIFFERENT styles/rules, css uses cascading method to render the code (meaning top to bottom), the one at the bottom closest to the element wins. But When there are multiple styles targeting the same element/tag selector, the browser uses specificity rule/score to determine which one is more specific to the element and that rule will override all other rules and wins. Specificity is dependent on what is in the selector Inline styles carries 1000 score, they are weightier as they are attached directly to the element to be styled
  • h1 {...}

  • #gamechanger {...}

  • <div id="gamechanger"> <h1 style="....: ..."> Airlines </h1> </div>
The last item style will be applied as is inline style and closest to the item to be styled
ID's are unique selectors and carries 100 points which has higher specificity than classes, attributes and elements
  • #main-content p {...};

  • p{...};
 The first selector style will be applied as it has got id in its selector which carries 100points
Classes, attributes, pseudo-class selectors all carries 10 points each which has higher specificity than elements
  • .scout p {...};

  • h2{...};
 The first selector style will be applied as it has got class in its selector which carries 10points
Elements and pseudo-elements have 1 points each p, h1...h6, div, :before, :after They all have 1points each and rank last