CSS Selectors

CSS selector is the part of a CSS rule that describes what elements in a document the rule will match. The matching elements will have the rule’s specified style applied to them.

There are 5 categories of selectors:

  •  Simple selectors (select elements based on name, id, class)
  •  Combinator selectors  (select elements based on a specific relationship between them)
  •  Pseudo-class selectors  (select elements based on a certain state)
  •  Pseudo-elements selectors  (select and style a part of an element)
  •  Attribute selectors  (select elements based on an attribute or attribute value)

Simple selectors

id selector

<div id="logo">
    Hello ID
</div>

<style>
    #logo{
        color: blue;
    }
</style>

class selector

<div class="name">
    Laulau
</div>
<div class="name">
    Kinga
</div>
<style>
    .name{
        color: red;
    }
    /*or*/
    div.name{
        color: red;
    }
</style>

element selector

<p>
    Laulau
</p>
<p>
    Kinga
</p>
<style>
    p{
        color: green;
    }
</style>

Universal(*) selector

universal selector (*) selects all HTML elements on the page.

<style>
    * {
        text-align: center;
        color: black;
    }
</style>

Group selector

group selectors minimize how much code you have to write. To group selectors, separate each selector with a comma.

h3, h4, p, div {
  text-align: left;
  color: black;
}

 

Combinator selectors

A combinator is something that explains the relationship between the selectors.

Descendant selector (space)

descendant selector matches all elements that are descendants of a specified element.

<ul>
    <li>
      <div>List 1</div>
      <ul>
        <li>Name A</li>
        <li>Name B</li>
      </ul>
    </li>
    <li>
      <div>List 2</div>
      <ul>
        <li>Name A</li>
        <li>Name B</li>
      </ul>
    </li>
</ul>

<style>
    li {
        list-style-type: disc;
    }

    li li {
        list-style-type: circle;
    }
</style>

Child selector

child selector selects all elements that are the children of a specified element.

         div > div > p{
             background-color: red;
         }
<div class="col-9">
     <div>
         <p>
             Laulau
         </p>
         <p>
             Kinga
         </p>
     </div>
 </div>

Adjacent sibling selector(+)

Adjacent sibling selector matches the second element only if it immediately follows the first element, and both are children of the same parent element. This only applies to the first element found.

<div class="col-9">
    <img src="superman.jpeg" alt="superman" />
    <span>superman</span>
</div>

<style>
   img + span {
      font-weight: bold;
   }
</style>

General sibling selector(~)

general sibling selector selects all elements that are siblings of a specified element.

<p>Here is a paragraph.</p>
<code>Here is some code.</code>
<span>And this is a red span!</span>
<code>More code...</code>
<h2> that's all. </h2> 
<span>And yet again this is a red span!</span>

<style>
    /* general sibling */
    p ~ span {
        color: purple;
        font-weight: bold;
    }
</style>

 

Pseudo-class selector

A pseudo-class is used to define a special state of an element.

Examples:

  • Style an element when a user mouses over it
  • Style visited and unvisited links differently
  • Style an element when it gets focus
<div class="row">
    <div class="col-3">
        Pseudo-classes Selector<br>
    </div>
    <div class="col-9">
        <a>Hover here <span>man</span></a>
    </div>
</div>

        <style>
            /*  pseudo-classes selector */
            a > span:hover {
                background-color: blue;
            }
        </style>

Pseudo-class selector :first-child

:first-child represents the first element among a group of sibling elements.

<style>
    /* first-child <p> under parent with id first-child */
    #first-child p:first-child {
        color: green;
        background-color: blue;
        font-weight: bold;
    }
</style>

 

Pseudo-class selector :nth-child(n)

 :nth-child(n) matches elements based on their position in a group of siblings.

<style>
    /* second child under parent with id nth-child
    #nth-child p:nth-child(2){
        color: blue;
    }
</style>

Pseudo-element selector ::before

::before pseudo-element can be used to insert some content before the content of an element.

<div class="row">
    <div class="col-3">
        Pseudo-element Selector<br>
        <strong>::before</strong> pseudo-element can be used to insert some content before the content of an element.<br>
    </div>
    <div class="col-9" id="before">
        <p>The first paragraph.</p>
        <p>The second paragraph.</p>
    </div>
</div>
        <style>
            #before p::before{
                content: "->";
            }
        </style>

 

Pseudo-element selector ::after

::after pseudo-element can be used to insert some content after the content of an element.

<div class="row">
    <div class="col-3">
        Pseudo-element Selector<br>
        <strong>::after</strong> pseudo-element can be used to insert some content after the content of an element.<br>
    </div>
    <div class="col-9" id="after">
        <p>The first paragraph.</p>
        <p>The second paragraph.</p>
    </div>
</div>
        <style>
            /* add <- in front of <p> */
            #after p::before{
                content: "<-";
            }
        </style>

Attribute

attribute selector is used to select elements with a specified attribute.

<div class="row">
    <div class="col-3">
        Attribute Selector<br>
        <strong>[attribute]</strong> selector is used to select elements with a specified attribute.<br>
    </div>
    <div class="col-9" id="attribute">
        <p title="first-para">The first paragraph.</p>
        <p title="second-para">The second paragraph.</p>
    </div>
</div>
        <style>
            #attribute p[title]{
                background-color: purple;
            }
        </style>

Attribute value

attribute value selector is used to select elements with a specified attribute and value.

<div class="row">
    <div class="col-3">
        Attribute Selector<br>
        <strong>[attribute="value"]</strong> selector is used to select elements with a specified attribute.<br>
    </div>
    <div class="col-9" id="attributeValue">
        <p title="first-para">The first paragraph.</p>
        <p title="second-para">The second paragraph.</p>
    </div>
</div>
         <style>
            #attributeValue p[title="first-para"]{
                color: red;
            }
        </style>

 

Source code on Github




Subscribe To Our Newsletter
You will receive our latest post and tutorial.
Thank you for subscribing!

required
required


Leave a Reply

Your email address will not be published.