What are CSS3 SELECTORS?

Our web development institute in Delhi has brought a detailed blog on CSS3 Selectors. let’s take a look at it.

CSS stands for “Cascading Style Sheets”. These are used to define the presentation of the content on a web page. They define the font, color, size and format of the content. CSS standards are set by World Wide Web Consortium (w3c). CSS3 stands for the latest version of CSS. CSS of a document is defined using its position in the document tree.

Know about Document Tree

As the literal meaning goes; a document tree is a tree of documents. Similar to a tree, a document tree has a root and several other nodes. Technically, it is a graphical representation of the hierarchy of the elements used in a document. A sample document tree is as:

The stages of in the document tree are known are the nodes. The topmost nodes (the html node) are known as the root node. The root node is divided into two child nodes, the head note and the body node, which in turn have further child nodes.

Once we know the position of an element in the document tree, we can proceed further towards its styling. To style a document, we need to use various types of styling rules out of which, CSS Selectors play a major role.

What are Selectors in CSS

Selectors are used to target a particular element or a group of elements in the document tree. The elements that are selected are also referred to as the subject of the selector.

Like all other properties of a coding language, the selectors also have a specified syntax that should be followed while use. They are used as a sequence of simple selectors which are separated by combinators. We describe these in the following section.

We can divide the selectors as:

1. Simple selectors
2. Combinators

Let us discuss them in detail,

1. Simple Selectors

Simple selectors are used to pick up the elements for formatting. They are classified as:

2. Universal Selector

Universal selectors target all the elements of the document tree, no matter their position in the document tree. They are specified using an asterisk(*) symbol.

This is used as: 

*{margin:0px; padding:0px;}

Specifies the margin and the padding to be set as 0px for all the elements of document.

Type selector

Type selectors are used to select the elements of the document tree by matching their characteristic.

This is used as:

• ul{list-style-type:none;}
• h1{font-size:20px; font-family:serif;}
• p{float:left;}

These apply the given properties to ul, h1 and p respectively.

Id selector

Id selectors are used to select the element to which the specific id is allotted. This is a rigid selector and cannot be reused.

This is used as:

• #id1{float:right;}
• #id2{color:#fff;}
• #id3{background-color:#000;}

These apply the given properties to id1, id2 and id3 respectively.

Class selector

Class selectors are used to select the element to which the defined class name is allotted. This can be used any number of times. We can use multiple call names in a single definition but should be not overused.

This is used as:

• .class1{font-size:14px;}
• .class2{margin:10px;}
• .class3{padding-left:10px;}

These apply the given properties to class1, class2 and class3 respectively.

Attribute selector

Attribute selectors are used to target the elements of the document by an attribute specification. This can be divided into various types such as:

• [attribute]- This will select all the elements which have the given attribute defined, no matter what the value given.eg- img[alt] a[title]The first declaration selects all the images which have alternate text attribute and the second declaration selects all the anchors which have title attribute.
• [attribute=”value”]- This will select all the elements which have the given attribute defined with the specific value.eg- img[alt=”abc”] a[title=”image”]The first declaration selects all the images which have alternate text attribute with the value “abc” and the second declaration selects all the anchors which have title attribute with the value “image”.
• [attribute~=”value”]- This will select all the elements which have the given attribute defined with the value including the space separated word specified in the definition. eg- img[alt~=”source”]This will select all the images which have the word source separated by space in its alt attribute like the ones having “any source”, “source any” or “any source any” type of text.
• [attribute^=”value”]- This will select all the elements which have the given attribute value starting with the specified one.eg- a[href^=”http”]This will select all the anchor tags which have their href values starting with http like the ones having “http://abc.com“, “http://pqr.net” and so on.
• [attribute$=”value”]- This will select all the elements which have the given attribute value ending with the specified one. eg- img[src=”.jpg”] This will select all the images which have their src value ending with .jpg like the ones having “abc.jpg”, “pqr xyz.jpg” and so on.
• [attribute*=”value”]- This will select all the elements which have the given attribute value using the specified string anywhere as its substring. eg- img[src*=”source”]This will select all the images which use the string ‘source’ as a substring anywhere in its src attribute like the ones having “anysource”, “sourceany” or “anysourceany”.

Pseudo classes

Pseudo classes are used to target the part of the document that does not directly lie in the document tree. These are a very powerful tool which we can use to avoid the lengthy codes and overuse of classes. These are always used with a colon(:).This can be divided into various types such as:

Important: It is important to know the difference between the hover, focus and active links.

Hovered links are the ones which are hovered specifically by the mouse.

To understand the difference between the active links and the focus links, we take an example. When we switch between elements using the tab button on the keyboard, the element which is highlighted is considered as the Focus link and when the link is actually visited, it turns to be an Active link.

• Dynamic pseudo classes- These classes can change their value at different point of times. These classes include:
  • link– This specifies the properties which should be applied on all the links. eg- a:link{color:red;} This will change the colour of all the links changes to red.
  • :visited– This specifies the properties of all the visited links. eg- a:visited{color:blue;} This will change the colour of all the visited links to blue.
  • :hover– This specifies the properties of all the links that are hovered. eg- a:hover{color:green;} This will change the colour of all the links to green when they are hovered.
  • :active– This specifies the properties of the link when it is pressed. eg- a:active{color:purple;} This will change the colour of the link which is in use, i.e., which is being viewed currently.
  • :focus– This specifies the properties of the link when in focus. eg- a:focus{color:black;} This will change the colour of the link in focus to black.
• Structural pseudo classes- These classes are used to select the elements using the extra information which is there in the document tree but is inaccessible with the help of other simple classes. These classes include:
  • :root– This selects the top most element of the document. In html, it is always the html tag.eg- :root{background-color:black;}This sets the background colour of the html tag to black.
  • :first-child- This will select the first child element of a different element.eg- li:first-child{properties}This will apply the properties to all the first siblings of li.
  • :last-child- This will select the last child element of a different element.eg- li:last-child{properties}This will apply the properties to all the last siblings of li.
  • :nth-child(n)- This will select the nth child element of a different element.eg- li:nth-child(3){properties}This will apply the properties to all the third siblings of li.
  • :nth-last-child(n)- This will select the nth child element from last of a different element.eg- li:nth-last-child(3){properties}This will apply the properties to all the third siblings from the last of li.
  • :first-of-type- Just like first-child, this will select the first sibling of the given element with the same type.
  • :last-of-type- Just like last-child, this will select the last sibling of the given element with the same type.
  • :nth-of-type(n)- Just like nth-child(n), this will select the nth number of sibling of the given element with the same type.
  • :nth-last-of-type(n)- Just like nth-last-child(n), this will select the nth number of sibling from last of the given element with the same type.
  • :only-child- This will select the elements of the specified type which are the single child of a different element.
  • :only-of-type- This will select the elements of the specified type which are the single child of the given type of a different element.
  • :empty– This will select the given type of elements which have no child.
• UI element state pseudo classes- This is used to select the user interface elements.
  • :enabled– This selects all the user interface elements that are in the enabled state.
  • :disabled– This selects all the user interface elements that are in the disabled state.
  • :checked– This selects all the user interface elements that are checked. This is generally used with the radio buttons and checklists.
• Negation pseudo class– This is used to select the elements other that the type defined. For example- when we write div:not(#container), this will select all the divs which are outside the id container.
• Target pseudo class- This selects the element which has been defined but is only used when we use internal linking in the page. The internal linking is given using a # symbol followed by the id. When using such linking, we use the target pseudo class to apply properties on the currently active link area.
• Lang pseudo class- This is used to select an element which has the given specified language. For example- when we write :lang(en), this will select the element in language English.

Pseudo elements- Pseudo elements are used to target the area of the document which is beyond the specification in a document tree.

These are always used with a double colon (::). We can only use one pseudo element in a single declaration. These are of various types such as:

• ::first-line– This is used to select the first line of the given element. eg- p::first-line{properties;} This applies the properties to the first lines of all the paragraphs.
• ::last-line– This is used to select the last line of the given element. eg- p::last-line{properties;} This applies the properties to the last lines of all the paragraphs.
• ::first-letter- This is used to select the first letter of the given element. eg- p::first-letter{properties;} This applies the properties to the first letter of all the paragraphs.
• ::last-letter- This is used to select the last letter of the given element. eg- p::last-letter{properties;} This applies the properties to the last letter of all the paragraphs.
• ::before– This is used to append the area before the selected class. eg- p::before{properties;} This applies the properties before all the p elements.
• ::after- This is used to append the area after the selected class. eg- p::after{properties;} This applies the properties after all the p elements.

Combinators

Combinators are classified as:

Descendant Selector- 

Descendant selectors are used to select the elements which are sub-elements of the other element.

Example:

ul a{properties;}

It will apply the given properties only to the anchor tags which lie under unordered lists.

div h1{properties;}

It will apply the given properties only to the h1 tags which lie inside a div.

Child selector

Child selectors are used to select the elements which are the direct children of the other given element. This is used with the help of greater than(>) symbol.

eg- div>em{properties;}, will only apply the properties to them which is directly a child of div and not to the sub child.

Adjacent sibling selector

Adjacent sibling selectors are used to select the adjacent sibling just next to the one defined. This is used with the help of a plus (+) symbol.

eg- h2+h3{properties;}, will apply the properties to the h3 elements which are directly followed by the h2 element.

Using the above given selectors, makes our code more efficient and short.