02 CSS Selectors

02 CSS Selectors

Selectors

How styles are to be applied to elements on the page.

Common Selectors :

<style>
    #intro{
      padding:24px;
      background-color: rgb(37, 105, 164);
      color:white;
    }
    h1 {
      color :rgb(190, 190, 213);
    }
    .heading{
      color :rgb(15, 15, 136);
    } 

    .tagline {
      background-color: brown;
    }

    article h2{
      background-color: blueviolet;
    }
    article > p{
      background-color: coral;
      color:wheat;
    }
  </style>
 <section id="intro">
    Its a ID Selector
    <h1>Heading 1  Type Selector</h1>
    <h2 class="tagline">Class Selector</h2>
  </section>
  <h1 class="heading">1. CHILD SELECTORS</h1>
  <h1 class="heading">A. DESCENDENT SELECTORS</h1>

  <h2>Heading not selected</h2>
<article>
  <h2>This heading will be selected</h2>
  <div>
    <h2>This heading will be selected</h2>
    <div>
      <h2>This heading will be selected</h2>
    </div>
  </div>
</article>

<h1 class="heading">B. DIRECT CHILD</h1>
<p>Paragraph not selected</p>
<article>
  <p>Paragraph selected</p>
  <div>
    <p>Paragraph not selected</p>
    <div>
      <p>Paragraph not selected</p>
    </div>
  </div>
  <p>Paragraph selected</p>
</article>

These selectors include the type, class, and ID selectors.

The type selector identifies an element based on its type

The class selector identifies an element based on its class attribute value, which may be reused on multiple elements as necessary to help share popular styles.

the ID selector identifies an element based on its ID attribute value, which is unique and should only be used once per page.

Child Selectors :

There shall be a parent element inside there may be child elements. selections can be made two different ways, using either descendant or direct child selectors.

A. Descendant Selectors

Parent -> Child may be immediate or any level of grant child. Selects an element that resides anywhere within an identified parent element

B. Direct Child Selects an element that resides immediately inside an identified parent element

Sibling Selectors :

Elements share the common parent

A. General Sibling Selector

<style>
    h2 ~ p {
      background-color: brown;
      color:white;
    }
    h1 + div {
      background-color: blueviolet;
      color:white;
    }
  </style>
 <p>Not Selected</p>
<section>
  <p>Not Selected</p>
  <h2>Heading 1</h2>
  <p>This paragraph will be selected</p>
  <div>
    <p>Not Selected</p>
  </div>
  <p>This paragraph will be selected</p>
  <h3>Heading 3</h3>
  <p>This paragraph will be selected</p>
</section>

<section>
  <h1>Heading 1</h1>
  <div>
    Hello Div 1
    <p>Hello Div 1 Para 1
      <div>
        Division 1_2
      </div>
    </p>
  </div>
  <h2>Heading 2</h2>
  <div>
    div 2
  </div>
  <h1>Heading 1</h1>
  <div>
    Div 2
  </div>
  <div>
    Div 2_2
  </div>
</section>

The Selector_1 ~ Selector_2 selector is a general sibling selector that looks for Selector_2 elements that follow, and share the same parent, of any Selector_1 elements.

Eg :The h2 ~ p selector is a general sibling selector that looks for p elements that follow, and share the same parent, of any h2 elements.

B. Adjacent Sibling

Refer above snippet

Looking at the adjacent sibling selector h2 + p only p elements directly following after h2 elements will be selected. Both of which must also share the same parent element. h2 + p

Looking at the adjacent sibling selector h2 + p only p elements directly following after h2 elements will be selected. Both of which must also share the same parent element.

Attribute Selectors

Elements can be selected based on whether an attribute is present and what its value may contain.

ID ,class selectors

A. Attribute Present Selector

attribute present or not

For Eg : a[target] {...} if a tag includes target attribute

B. Attribute Equals Selector

To identify an element with a specific, and exact matching, attribute value

a[href="google.com"] {...}

C. Attribute Contains Selector

Find an element based on part of an attribute value

a[href*="login"] {...}

D. Attribute Begins With Selector

a[href^="https://"] {...}

E. Attribute Ends With Selector

a[href$=".pdf"] {...}

F.Attribute Spaced Selector

The tilde character, ~, within the square brackets of a selector between the attribute name and equals sign denotes an attribute value that should be whitespace-separated, with one word matching the exact stated value. a[rel~="tag"] {...} ...

G.Attribute Hyphenated Selector

a[lang|="en"] {...}

...

Pseudo Classes

result of users’ actions or the document structure

<style>
    a:hover {
      text-decoration: none;
    }
    a:link {
      color: rgb(187, 14, 14);
    }
    a:visited {
      color:rgb(42, 155, 165);
    }
    a:focus {
      font-weight: bold;
    }
    a:active {
      letter-spacing: 2em;
  </style>

<a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>

A. Link Psuedo-Classes a:link,a:visited

B. User Action Pseudo-classes :hover, :active,:focus

C. User Interface State Pseudo-classes :enabled, :disabled, :checked, and :indeterminate(When a checkbox or radio button has neither been selected nor unselected it lives in an indeterminate state). (Checkbox and radio buttons)

D. Structural & Position Pseudo-classes

 <style>
    ul {
      color :rgb(177, 172, 172);
    }

    li:first-child {background-color: blue;}
li:last-child {background-color: rgb(254, 1, 39);}
div:only-child {background-color: rgb(255, 0, 208);}

ul div{
  background-color: rgb(69, 29, 29);
}

article p:first-of-type{
  font-weight: bold;
}

article p:last-of-type {
  color: brown;
}
article p:only-of-type {
  color:blueviolet;
}
  </style>
 <article>
    <p>paragraph First of Type</p>

    <div>      
      <p>Para div 1</p>
      <span>Span 1</span>
      <p>Para div 2</p>
    </div>
    <p>para inside main parent</p>
    <div>
      <p>Only para</p>
    </div>
  </article>

Elements are determined based off where elements reside in the document tree

:first-child pseudo-class will select an element if it’s the first child within its parent. Eg: li:first-child identifies the first list item within a list

:last-child pseudo-class will select an element if it’s the last element within its parent.

:only-child will select an element if it is the only element within a parent.

to select the first, last, or only child of a specific type of element. For example, should you only want to select the first or last paragraph within an article, or perhaps the only image within an article. :first-of-type, :last-of-type, and :only-of-type pseudo-selectors come into place.

select elements based on a number or an algebraic expression. nth-child(n), :nth-last-child(n), :nth-of-type(n), and :nth-last-of-type(n).

Expressions in the argument (an,an+b,an-b etc)

:target - selects the sections/elements based on the # in the URI

 <style>
    section:target {
      color:red;
    }

    div:empty {background-color: aqua;border: 2px solid black; width:20%; height:20%;}
    p:not(.intro) {
      background-color: bisque;
    }
  </style>
 <a href="#hello">Click Hello</a>
  <a href="#hi">Click hI</a>
  <section id="hello">
    <p>Para 1</p>
  </section>

  <section id="hi">
    <p>Para 2</p>
  </section>


  <div>Hello</div>
<div><!-- Coming soon --></div><!-- This div will be selected -->
<div></div><!-- This div will be selected -->
<div> </div>
<div><strong></strong></div>


<div>
  <p class="intro">Paragraph1</p>
  <p>Paragraph2</p>
  <p>Paragraph3</p>
  <p>Paragraph4</p>
  <p>Paragraph5</p>
</div>

The :empty pseudo-class allows elements that do not contain children or text nodes to be selected. :not(x), is a pseudo-class that takes an argument which is filtered out from the selection to be made. The p:not(.intro) selector uses the negation pseudo-class to identify every paragraph element without the class of intro.

Pseudo-elements :

Textual Pseudo-elements

:first-letter

Selects the first letter of text within an element

:first-line

Selects the first line of text within an element

Generated Content

:before

Creates a pseudo-element inside the selected element at the beginning

:after

Creates a pseudo-element inside the selected element at the end