Master CSS selectors with Examples

Master CSS selectors with Examples

ยท

5 min read

Table of contents

#Introduction

What is CSS Selector๐Ÿค” CSS is a design language that makes a website look more appealing than just plain or uninspiring pieces of text and to have control of every element in a web page for modification, we use selectors.

Let's Start...

HTML code for all the examples:-

<div>
    <p>Lets Learn CSS Selector</p>
      <ul>
        <li class="list_1">Meta</li>
        <li id="list_2">Apple</li>
        <li>Amazon</li>
        <li>Netflix</li>
        <li>Google</li>
      </ul>
    <p>This is a paragraph </p>
</div>
  1. Universal Selector

    It is used to target the whole body using an asterisk(*).

    Example:-

  2. Individual Selector

    It selects all the elements with the matching node name present in the HTML, if we want to select all the divs then we will write div { } else if we want to select all the list items we will write li { }

    Example:-

  3. Combined Selector

    It is used to avoid repeating the same line of code as well as to group the elements having similar properties. the elements are separated by commas.

    Example:-

  4. Inside an Element

    In this selector, we target all the matching node elements present inside the DOM.

    Example:- here all the elements inside div which has ul which contain li are being selected whereas if we only write div li then all the li inside div will be selected.

  5. Direct Child Selector

    In this selector, all the elements one level deep inside the mentioned element will be selected, like, if we write div > li all the li next to the div will be selected except the li inside the ul

    Example:-

  6. Sibling Selector

    It is of two types General(~) and Adjacent(+), Let's understand through an Example:-

    The general selector selects all the elements next(immediate or not) to the element with class name list_1

    whereas the Adjacent selector selects the element immediately next to the element with class name list_1.

  7. Class name and Id name

    We can also select any particular element by its class name or id name, for this we need to first give a class name or id name to the element and then we can make style changes by calling the class using the (.) symbol and id by using (#) symbol.

    Here we can also target the element like div.list_1 or div#list_2 which will give a more precise selection for the style, i.e. I want to select only that div which has the class name of list_1 or I want to select only that div which has the id name of list_2. The advantage of selecting like this is that we can use list_1 as the class name for several elements paragraphs, anchor tag, etc, but if we want to target any particular element then we write in a specific way otherwise all the elements with that same class name will be reflecting that style property.

  8. Pseudo Classes

    ๐Ÿ‘‰Hover

    :hover selects the element when the user hovers over the target using pointing devices like a mouse.

    Example:-

    ๐Ÿ‘‰Focus

    :focus is used to select the element like button or input boxes, when the user clicks or selects the element.

    Example:-

    ๐Ÿ‘‰Enabled & Disabled

    :enabled and disabled is used in input boxes to select it and to show if the input box is enabled or disabled.

    Example:-

    ๐Ÿ‘‰Root

    :root It represents the root directory in the hierarchy of the document in the html. It is generally used to store CSS Variables. var(variable-name) is used to access these variables.

    Example:-

    ๐Ÿ‘‰First Child, Last Child and Nth Child

    :first-child :last-child & nth-child() selects the first, last and the nth element of the parent element respectively.

    Example:-

    ๐Ÿ‘‰Before & After Pseudo Elements

    :before pseudo selector selects an area of the content before the desired element whereas :after pseudo selector selects an area of the content after the desired element

    Example:-

    ๐Ÿ‘‰Marker

    ::marker It is used to make a few changes in terms of the appearance of the bullets of the list items.

    Example:-

    ๐Ÿ‘‰Selection

    ::selection is used to make changes in terms of looks to the selected area or text by the user. using selection, we can only make changes to the color, background, cursor, and outline.

    Example:-

    ๐Ÿ‘‰First Letter & First Line

    ::first-letter selects the 1st letter of the desired paragraph whereas the

    :first-line selects the 1st line of an element or a paragraph.

    Example:-

**Reference**

1.  [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)

2.  [W3Schools](https://www.w3schools.com/css/css_selectors.asp)


### Thanks for reading

Connect with me on:

๐Ÿง‘โ€๐Ÿš€[Linkedin](https://www.linkedin.com/in/ravindap04)

๐Ÿš€[GitHub](https://github.com/ravindrap04)
ย