Pawan Thanay's Blog

Detail guide on CSS Selector with code examples

Detail guide on CSS Selector with code examples

Getting started with CSS

Pawan Thanay's photo
Pawan Thanay
·

4 min read

CSS Selector:

CSS selectors are HTML items(elements, classes, IDs) that we target in order to apply CSS style to our HTML.

Implementation:

Implementing CSS selectors to their specificity is how we use CSS. We target a selector and then apply styles to it, making sure it's not overwritten later by other styles.

Here's a list of the selectors used in CSS
  • Universal Selector
  • Individual Selector
  • Class and Id Selector
  • And Selector (Chained)
  • Combined Selector
  • Inside an element
  • Direct child
  • Sibling ~ or +

Universal Selector (*):

Represented by the asterisk (shift+8), this will select every object on your page and apply the styling to it individually.

Example:
<body>
 <div>
    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
        <li>Five</li>
    </ul>
 </div>
 <div>
    <ol>
        <li>Six</li>
        <li>Seven</li>
        <li>Eight</li>
        <li>Nine</li>
    </ol>
 </div>
</body>

    <style>
        *{
            background-color: #4d4d4d;
            color: white;
        }
    </style>

Individual Selector:

HTML elements will be all over your page and can be selected to apply styles. They carry more specificity than universal but less than the rest.

Example:
    <style>
        ol{
            background-color: #4d4d4d;
            color: white;
        }
    </style>

Class and Id Selector:

Classes are attributes we assign to HTML elements primarily for styling and javascript purposes. The syntax of assigning a class looks like this

<p class="sibling">Example</p>

In order to target classes in CSS, we use a period before calling the class name.

Example:
<body>
 <div>
    <ul>
        <li class="one">One</li>
        <li id="second">Two</li>
        <li>Three</li>
        <li id="four">Four</li>
        <li class="one">Five</li>
    </ul>
 </div>
</body>

    <style>
        .one{
            background-color: #4d4d4d;
            color: white;
        }
    </style>

ID's are similar to classes, except you can only apply a single ID to a single element per page. Now, you can have multiple IDs on an HTML document, but each ID is its own unique entity. It's very bad practice to apply the same Id to multiple elements or multiple IDs to one element. The syntax of assigning an ID looks like this

<p id="child">Testing</p>

In order to target ID's in CSS, we use a # before calling the Id name.

Example:
    <style>
        .one{
            background-color: #4d4d4d;
            color: white;
        }
        #second{
            background-color: #61aae6;
            color: white;
        }
        #four{
            background-color: #61aae6;
            color: white;
        }
    </style>

Chained Selector:

To Express AND we can simply concatenate classes. It selects all elements with both class1 and class2. The syntax of assigning multiple classes looks like this

  <li class="bg-black text-white">item1</li>
Example:

    <style>
        li.bg-black.text-white{
            background-color: #b8191933;
            color: white;
        }
    </style>

Combined Selector:

The Combined selector selects all the HTML elements with the same style definition. Combined selectors, separate each selector with a comma.

Example:
<body>
 <div>
    <ul>
        <li class="one">One</li>
        <li id="second">Two</li>
        <li class="sample whitesample">Three</li>
        <li id="four">Four</li>
        <li class="one">Five</li>
        <li class="temp">Test</li>
    </ul>
 </div>
 <div>
    <ol>
        <li>Six</li>
        <li>Seven</li>
        <li>Eight</li>
        <li>Nine</li>
    </ol>
 </div>
</body>

    <style>

        ol,.temp{
            background-color: #7348c2;
            color: white;
        }
    </style>

Inside an element:

Inside an element selector is used to select an element inside the element.

Example:
    <style>
        div ol li{
            padding: 10px;
        }
    </style>

Direct child:

Direct child selector (>) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first.

Example:
 <div>
    <span>child of div</span>
    <div>
        <p>
            <span>child of p</span>
        </p>       
    </div>

 </div>

  div > span {
         background-color: yellow;
  }

Sibling ~ or + Selector:

~ Sign

It is one of the sibling selectors and similar to + selector. The difference is that the second selector does NOT have to immediately follow the first one means it will select all elements that is preceded by the former selector.

Example:
    <div>
        <p>First</p>
        <div>
            <p>child p</p>
        </div>
        <p>second</p>
        <p>third</p>
    </div>

        div ~p{
            background-color: blue;
        }

It will target both the second and third

+ Sign

It combines two sequences of simple selectors having the same parent and the second one must come IMMEDIATELY after the first.

Example:
<div>
        <p>First</p>
        <div>
            <p>child p</p>
        </div>
        <p>second</p>
        <p>third</p>
    </div>

 div +p{
            background-color: pink;
        }

It will only select the first element that is immediately preceded by the former selector. In the above example, It will target to second ONLY because the owner P element comes just after div tag.

CSSineuronHTML530 Days of Code