GNWODEYAR BLOG

Css Selectors

Css Selectors

GURUNANJE WODEYAR MG's photo
GURUNANJE WODEYAR MG
·

2 min read

Table of contents

Hello Folks, In this article we are going to read about CSS Selectors.

1.Basic Selectors

  • Universal Selector

                   The Universal selector in CSS matches elements of any type.

               Syntax:  *{
                                 margin: 0;
                                 padding: 0;
                                 color: blue;
                               }

  • Class Selector

                The class selector is used target the element that has class attribute.

            Syntax:

            In HTML
            <p class="name">Name<p>

            In CSS
            .name{
                color: blue;
            }

  • ID Selector

                The ID selector is used target the element that has ID attribute.

            Syntax:

            In HTML
            <p id="name">Name<p>

            In CSS
            .name{
                color: red;
            }

2.Grouping Selector

  • Selector List

             The ' , ' is grouping selector which selects all matching nodes.

         Syntax:
         Selecting div and img selects all matching nodes in the file,

         .div , .img  {
                   color: white;
         }

3.Combinators

  • Descendant combinator

              The Descendant Combinator(space) selects the nodes which are descendants of  the first element

         Syntax:
         Selecting div and span as example, matches all the span elements which are inside div.

         div span {
                   color: white;
         }

  • Child Combinator

              The Child ' > ' Combinator selects the element which are direct children of the first element

         Syntax:
         Selecting ul and li as example, where ul is parent element and li as child element

         ul > li {
                   color: orange;
         }

  • General Sibiling Combinator

              The General Sibling  ' ~ '  combinator selects siblings, matches all the iterations of second element.

         Syntax:
         Selecting img and p as example, where paragraphs that are siblings of and subsequent to any image

         img ~ p {
                   color: orange;
         }

  • Adjacent Sibiling Combinator

              The Adjacent Sibling  ' + '  combinator separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent

         Syntax:
         Selecting img and p as example, where paragraphs that come immediately after any image

         img + p {
                   color: green;
         }

4.Pseudo

  • Pseudo Elements

              The ' :: ' pseudo represent entities that are not included in HTML

         Syntax:
         p::first-line,will match the first line of all p 

         p::first-line {
                   color: cyan;
         }

Refer this MDN documentation if you need more informationCSS SELECTORS

css_selectorCSS