In any application, there is a constant repetition of style codes and to apply the same styling to same code, we have selectors in CSS. A selector identifies the elements on the HTML page. The browser is capable for differentiating which selectors can be used. There are different types of selectors available and in this article, we will see in depth about each of those available selectors in CSS. Type of Selector The specification organizes and groups the selectors according to their characteristics. They have been added depending on their usage. The different types of selectors are listed below: Type selectors Class selectors ID selector Descendant Selectors Link pseudo class selector Pseudo element selector Selector Groups Dynamic pseudo class selector Language pseudo class selector Child selectors First child selector Adjacent selectors Attribute Selectors 1. Type selectors Type selectors select any elements on a page that matches with the selector. The selector <em> selects any elements on the page marked in the <em>…</em> tag. The elements added in the <b> tag can be made bold. It is the most simple selector and frequently used in many applications. The examples of the selector are as mentioned below: <p>Welcome to design through CSS </p> <li>This is a new user</li> The type selector can change the appearance of all the elements on the page. It is an easy selector to learn for the new users. The elements used for creating the web pages belong to three different display types. The different types of display are as mentioned below: Block: The elements are separated from the other elements on the page. The browsers provide a standard margin at the top and bottom of the page. With the use of CSS, user can redefine the margin around the block elements. The examples of the block elements are <h1>, <b>, <p> and many more. Inline: The elements are not separated from the surrounding elements in the flow, but they adjust with the adjacent elements. The elements display text as it appears on the page. The examples of the inline elements are <img> and <a> tags. List item: The list items are similar to the block elements, but a marker bullet is added to the left of the element. The element is added with respect to the parent element. The image is defined as marker which can be of any form. The list element <li> is the common example. The <ul> and <ol> tags can be added under the <li> tag. 2. Class selectors The cascading style sheet helps to create selectors to the specific type or class of element. It can select any element of the given class. They are supported by all the major web browsers. The syntax of the class selectors is as mentioned below: Code: .class { css declarations; } The class selector selects any kind of element of a particular class. They are called as solitary class selectors. In CSS, the form of this type is a dot followed by the class name. The example and output is as shown below: HTML: <style> .center { text – align : center; color : Red;} </style> <p class”center”> Demo of selectors in CSS </p> 3. ID selector The syntax of ID selector is similar to the class selector. The difference between the two is that the class selectors can be applied to one or more elements on a web page, the ID selectors can be applied to exactly one element. There are two types of ID selectors in CSS. They are Solitary ID selectors and ID selectors. In the Solitary ID selectors, they are applied to any type of element on the page. It selects the single element on a page. The ID selectors are applied to a particular type of element. The selector has the syntax as element-name # idname. The following code sample demonstrates the ID selector. HTML: <style> #para1 { text – align: center; color : Blue; Background – color: Aqua;} h1#h { text – align: center; color: Lime; border – bottom – style:dashed;} </style> <p id=”para1”>Welcome User </p> <h1 id=”h”>The tutorial describes about CSS </h1> The output for the code is as shown below: 4. Descendant Selectors The descendant selector provides the control over the appearance of the HTML elements. The selector selects an element only if it is the descendant of other element. It is simply a list of selectors each separated by a space. It is made of two or more selectors separated by a white space. The following code sample demonstrates the descendant selectors. HTML: <style> h2{ color :Green} em{ color :Lime} h2 em{ color :Blue} </style> <h2>The styles and effects <em> can be added </em> to any sheet</h2> The output for the code is as shown below: 5. Link pseudo class selector The link pseudo class selector is used for selecting the links in different states. The links can be normal, visited, hover, or active. A link cannot be simultaneously in visited and unvisited state. The selectors for each of the pseudo classes have the following forms. The a : link is the selector for the normal links The a : visited is the selector for the visited links The a : hover is the selector for the hover links The a : active is the selector for the active links The selectors should appear in the sheet in the following order as mentioned below: a { } a : link { } a: visited { } a: hover { } a: active { } The following code snippet demonstrates the link pseudo class selector. Code: <style> a: link { color : Green;} a: visited { color : Green;} a: hover { color: Red;} a: active { color : Yellow;} </style> <p1>Click this link <a href=”http://www.google.com”>Google</a></p1> The output for the code is as shown below: 6. Pseudo element selector There are two different pseudo element selectors used for the specific purposes. The first - line and the first – letters define the selector elements. The first line is selector is defined by the name for the element followed by the selector. The syntax is element name: first - line. The first letter selector is defined by adding the name of the element followed by the first letter. The syntax is element name: first – letter. The following code snippet shows the pseudo elements. HTML: <style> #param1:first-letter{ color:Red} p: first – line{ color: Blue} </style> <p id=”param1”>Welcome User</p> <p>The html tags are very easy to learn <br/> They are used in designing the web pages</p> The output for the code is as shown below: 7. Selector Groups The group selectors are the used to provide same style properties to several types of elements at once. For example, in a document user wants the heading of all the subtopics to be the same. In such cases, the selector groups are used. The syntax of the selector groups is a simple list of selectors separated by commas. The contents in the list can be defined according to the user requirements. The code snippet for the selector groups is as shown below: HTML: <style> h2,p {margin:left:.10em; border-color : Silver; background-color: Aqua;} </style> <p>The html tags are very easy to learn<br/> They are used in designing the web pages</p> <h2>Demo of selectors in CSS</h2> The output for the code is as shown below: 8. Dynamic pseudo class selector The pseudo class selector could be applied to only the <a> elements. The dynamic pseudo elements are extended to be applied to any elements. The form of the selector is to add one of the following states to any selector. The possible states are as mentioned below: : hover – when the mouse is over the selected element in the code :active – when the mouse id clicking the selected element :focus – when the element has the keyboard focus on it The dynamic pseudo class selector extends the existing link pseudo class selectors. The selector can be extended to the complex selectors. The following code snippet demonstrates the dynamic pseudo class selector. HTML: <style> a.intro : active { color : Red;} a.Detail : hover { color: Purple;} </style> <p2><a class=”intro” href=http://www.google.com>The article is an introduction to the dynamic pseudo selector</p><br/> <p3><a class=”detail” href=http://www.w3schools.com>The details of the article are as mentioned by the author</p3> The output for the code is as shown below: 9. Language pseudo class selector The lang attribute is used to specify the language in CSS. The two characters are used to define the language code for the particular language. The language pseudo selector helps the user to select elements encoded in the particular language. The: lang () selector is used for selecting elements with the lang attribute and the specified values. The following code demonstrates the use of the language selector. HTML: <style> p4 : lang (fre) { background : Aqua; } </style> <p4> I live in France </p4> <p4 lang = “fre”> Je vis en France </p4> The output for the code is as shown below: 10. Child selectors The child selector is used to match all the elements that are immediate children to the specified element. The symbol for the combinator in a child selector is ( > ) sign. The selector is fromed by listing its parent and then the child element separated by the > sign. The following code snippet demonstrates the child selector. HTML: <style> span > p8 { background – color : Red; } </style> <div> <h5> Interested in learning CSS</h5> </div> <div> </span> <p8>The topics are well explained</p8> </span> </div> The output for the code is as shown below: 11. First child selector The first child selector has syntax like pseudo element selector if the first element is contained by the parent element. The parent element is not considered by the browser. The syntax of the selector is followed by : first – child. The following code snippet demonstrates the first child selector. HTML: <style> p9 : first – child { background – color : Lime; } </style> <p9>This is the first child of its parent</p9> <h1>Welcome to the tutorial</h1> <p9>This is the second paragraph</p9> <div> <p9>This is the first child of the div element</p9> <br/> <p9>This is the second child of the div element</p9> </div> 12. Adjacent selectors The adjacent selectors select the sibling elements depending on the element flow. A selector is formed by listing the elements that must be adjacent in the order in which they must appear. The elements are separated by a “+”. The following code snippet demonstrates the adjacent selector. HTML: <style> p10+p10 { text – indent : 1.5em; margin : 0; background – color : Purple;} </style> <h3>Title</h3> <p10>The example of paragraph </p10> <p10>The data is in the form of lines </p10> <p10>The group of data denotes a paragraph</p10> <div class=”intro”> <p10>This is a new class </p10> </div> The output for the code is as shown below: 13. Attribute Selectors The attribute selectors are similar in functionality to the id and class selector but are different in their syntax. The attributes are the properties of the HTML element. The selectors have two parts. The first part identifies an element that can be a type of selector or a specific kind of selector. The second part defines the condition of the selector. The four conditions for an attribute selector are as mentioned below: The particular attribute be set The particular attribute be set to a specific value It specifies the range of values among the space separated list of values It specifies the range of values among the hyphen separated list of values An attribute selector selects an element when both The selector matches the element The specified attribute condition is met The part of selector that specifies the condition for attributes is contained within the square brackets. The types of attribute selectors are as mentioned below: 1. CSS [attribute] selector The [attribute] selector is used to select the elements with the specified attribute. The following example demonstrates the use of the selector. The code snippet for the selector is as shown below: HTML: <style> a [ target] { background – color : Yellow; } </style> <p>The following are the links to the web pages</p> <a href=”http://www.facebook.com”>Facebook</a> <a href=”http://www.gmail.com”>Gmail</a> The output for the code is as shown below: 2. CSS [attribute = value] selector The [ attribute = value] selector is used to select elements with the specified attribute and value. The code snippet for the selector is as shown below: HTML: <style> a [ target = _blank] { background – color : Aqua; } </style> <p>The following are the links to the web pages </p> <a href=”http://www.facebook.com”>Facebook</a> <a href=”http://www.google.com”>Google</a> The output for the code is as shown below: 3. CSS [attribute~=value] selector The [attribute~=value] selector is used to select elements with an attribute value containing a specified word. The code snippet for the selector is as shown below: HTML: <style> [title~=Leaves] { border: 7px solid Aqua; } </style> <p> The images with word leaves will have border color as Aqua</p> <img src=”Autumn Leaves.jpg” title=”Leaves” width=”150” height=”100” /> <img src=”Autumn Winter.jpg” title=”Leaves” width=”150” height=”100” /> <img src=”Autumn Tree.jpg” title=”Tree” width=”150” height=”100” /> The output for the code is as shown below: 4. CSS [attribute|=value] selector The [attribute|=value] selector is sued to select the elements within the specified attribute starting with the specified value. The code snippet demonstrates the use of the selector. HTML: <style> [class|=top] { background:Yellow; } </style> <h1 class=”top-header”>The attribute selector is used</h1> <p class=”top-footer”>The values are displayed</p> <p class=”content”>Good for learning CSS</p> The output for the code is as shown below: 5. CSS [attribute^=value] selector The [attribute^=value] selector is used to select elements whose attribute values begins with the specific value. The following code snippet demonstrates the selector. HTML: <style> [class^=new] { background: Yellow; } </style> <h1 class=”new-header”>The attribute selector is used</h1> <p class=”new-footer”>The values are displayed</p> <p class=”newcontent”>Good for learning CSS</p> The output for the code is as shown below: 6. CSS [attribute$=value] selector The [attribute$=value] selector is used to select the element whose attribute values end with a specified value. The following code snippet demonstrates the selector. HTML: <style> [class$=old] { background:Red; } </style>} <h1 class=”header-old”>The attribute selector is used</h1> <p class=”footer-old”>The values are displayed</p> <p class=”content-old”>Good for learning CSS</p> The output for the code is as shown below: 7. CSS [attribute*=value] selector The [attribute*=value] selector is used to select elements whose attributes value contains a specified value. The following code snippet demonstrates the selector. HTML: <style> [class*=er] { background:Aqua; } </style> <h1 class=”header”>The attribute selector is used</h1> <p class=”footer”>The values are displayed</p> <p class=”content”>Good for learning CSS</p> The output for the code is as shown below:
