CSS selectors simplified

Introduction

CSS stands for cascading style sheet, it is used to beautify html pages providing looks like color shape text fonts etc.

But how can we select particular html element?

for that CSS selectors are used

CSS selector are grouped in following way

• basic selectors
• Group selectors
• Combinators
• Pseudo-classes and pseudo-elements

Basic selectors:

• Universal selector
• Type selector
• Class selector
• ID selector
• Attribute selector

Group selectors:

• Selector list

Combinators:

• Descendant combinator
• Child combinator
• General sibling combinator
• Adjacent sibling combinator

Pseudo-classes and pseudo-elements

• Pseudo classes
• Pseudo elements

Now lets go in details

Basic selectors:

Universal selector:

it selects all elements inside the html document it also can restricts to specific name spaces.

  syntax:  * {} 
    ns|* {}  
    *|* {}

Example: * will match all the elements of the document, now as per below code all elements will get the following css properties but * selector has lower specificity so other selector can override it easily.

                 * {
                        color: red;
                        background-color: rgb(24, 78, 160);
                    }

Type selector:

it selects all the elements /nodes with respect to its name

syntax: elementName {}

exmaple: p will match any p element.

                    <style>
                        /* here p & h1 are typeSelector  */
                        p {
                            color: red;
                            background-color: rgb(24, 160, 151);
                        }

                        h1 {
                            color: rgb(74, 190, 32);
                            background-color: rgb(24, 78, 160);
                        }
                    </style>

Class selector:

It selects all the elements/node which match given class attribute.

syntax: .nav

example: . nav will select all elements which matches it

      .nav  {
                color: rgb(14, 14, 14);
            }

Id selector:

Selects an element based on the value of its id attribute. given ID must be unique to element in a document id should not be repeat, for repetition use class selector .

syntax: #idName

Example: #myid will match the element that have attribute id="myid".

            #myid {
                color: rgb(14, 14, 14);
            }

Attribute selector:

It select all the elements which have the given attribute, matches the given attribute.

syntax : [givenAattribute]  [givenAttribute=value]

Example: [mute] will match all elements which have mute attribute. [href="#"] will match all elements which have href="#" attribute

[href="https://example.org"] {
                              color: rgb(182, 11, 122);
                              font-size: 40px;
}

Grouping selectors:

Selector list:

The , selector is a grouping method used to selects all the matching nodes separated by it.

syntax: X, Y

Example: p, span will match both <p> and <span> elements.

p, span {
    color: rgb(182, 11, 122);
    background-color: rgb(112, 242, 37);
    font-size: 40px;
}

Combinators:

Descendant combinator:

The " " (space) combinator selects nodes that are descendants of the first or previous element, i.e. first selector will be recognized as the parent of the next selector, you can chain them for increasing CSS specificity

Syntax: X Y

Example: div p will match all the <p> elements inside <div>

div p {
    color: rgb(182, 11, 122);
    background-color: rgb(112, 242, 37);
    font-size: 40px;
}

Child combinator:

The > combinator selects nodes that are direct children(direct nested) of the first element.

Syntax: A > B

Example: div > p will match all <p> elements that are nested directly inside a <div> element.

div > p {
color: red;
}

<html>
<body>
<div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
</div>
</body>
</html>

General sibling combinator:

The ~combinator selects siblings that means target sibling elements after former elements selector, whether elements are immediate or not will be selected if both share the same parent.

syntax:

former_element ~ target_element { style properties }

Example: div ~ span will match all elements that follow a <div>, immediately or not.

CSS

div ~ span {
  color: red;
}

HTML

<div>
<code>Here is some code.</code>
<span>no applied</span>
</div>
<span>And this is a red span!</span>
<h1>header</h1>
<span>And  again this is a red span!</span>

adjacent sibling combinator:

+ selector matches the second element only if it immediately comes after the first element, and both are children of the same parent element.

syntax:

 former_element + target_element { style properties }

Example: p + li will match the first <li> element that immediately follows an <p> element.

CSS

p + li{
  color: red;
}

HTML

<ol>
  <p>para</p>
  <li>One</li>
  <li>Two!</li>
  <li>Three</li>
</ol>

Pseudo-classes and pseudo-elements:

Pseudo classes:

The : pseudoClass activates selection of elements only when state information like hovered or visited etc, are become true, this info not contained in the document tree its generated based on client/user interaction.

syntax:

element:pseudoClass

Example: a:hover will match all <a> elements that is/are getting hovered by the user.

CSS

/* Any a tag over which the user's pointer is hovering */
a:hover {
  color: blue;
}

HTML

<a href="">click me</a>

Pseudo elements:

The :: pseudo keyword added after selector :: ables you to select various part with respect to selector on which psedoElement applied, It represent entities that are not included in HTML.

Example: p::first-line will match the first line of all

elements.

syntax:

selector::pseudo-element {
  property: value;
}

Example: just before h2 an pseudo element will be created on which css will be applied

CSS

h2::before{
    content: "this is my pseudo element";
    color: rgb(148, 6, 6);
    background-color: aqua;
}

HTML

<h1><h1>
<h2></h2>

we will now look into ::before and ::after pseudo elements

::before pseudo elements:

::before creates a pseudo-element which is the first child of the selected element. its created before selected element, with content property you can add cosmetic content to an element . It is inline element by default.

syntax:

::before

Example: just before p selector pseudo element will be be created with respective css property

CSS

p::before {
content:"Before"
color:red;
}

HTML

<ol>
<li>One</li>
<p>para</p>
<li>Two!</li>
<li>Three</li>
</ol>

::after pseudo elements:

::after creates a pseudo-element which is the first child of the selected element. its created after selected element, with content property you can add cosmetic content to an element . It is inline element by default.

syntax:

::after

Example: just after p selector pseudo element will be be created with respective css property

CSS

p::after {
content:"after"
color:red;
}

HTML

<ol>
<li>One</li>
<p>para</p>
<li>Two!</li>
<li>Three</li>
</ol>

so these were the various CSS selectors feel free to play with them for in-depth understanding.