TecX-ray

Basic Css Selector

Photo by Markus Spiske on Unsplash

Basic Css Selector

Adebola Andrew Modongho's photo
Adebola Andrew Modongho
·

4 min read

Table of contents

  • TABLE OF CONTENTS
  • Element Selector
  • Universal Selector
  • ID Selector
  • Combine Selector
  • Direct Child Selector
  • Descendant /Inner Selector
  • Class Selector
  • Pseudo Selectors

    Selector

    Selectors are nothing but ways html elements are picked for styling

p{
  properties:values;
}

Properties are the cascading items we put together to beautify our html, values are set against the Css properties and this is what is called Css declaration.

Element Selector

  1. This selector helps you pick a single element to represent every other element of its kind, by specifying the name of the element behind the curled bracket, you automatically prepared every element of same type to take what ever properties and value you intend to assign.
<p>Welcome to tecX-ray</p>
<p>We teach coding like ABC </p>

p{
font-size:bold;
}

"what this line of code simply mean is -All paragraph size should be bold"

Universal Selector

  1. This selector helps you pick every element for styling with an exception none . This is done by assigning a star > "asterisk " behind the curled bracket and assigning properties and values.
<h1>This is my heading tag </h1>
<p>paragraph line of code</p>
<div> use me to create division among tag </div>

*{
  padding:0;
  margin:0;
  color:#fff;
}

"what this line of code simply mean is -Padding should be set to 0, margin also set to zero and colour of our text should turn white"

Note: Universal selector is used in carrying out Css reset, which is applied to take out default properties set by the browser

Id Selector (#)

  1. This selector is unique to a particular element, just like a phone number or Identity number cant be shared, this selector is not supposed to be assigned to more that one element, doing this defies the purpose of using this selector. 
<p id= "primary">paragraph with id </p>
<p>second paragraph </p>

#p{
text-decoration: underline;
}

Combine Selector (,)

  1. This selector make its possible for more than one type of element to be selected and properties assigned to all these element which have been selected. This is done by using a comma to separate each of the element > ", " .
<p>Welcome to tecX-ray</p>
<p>We teach coding like ABC </p>
<h1>journey begins </h1>
<h2>road to becoming a better dev person </h2>

p,h1,h2{
font-size:bold;
}

Direct Child Selector (>)

  1. In Html we consider every element inside another element as a child and the element which is housing other elements is called parents. To easily identify parent element, when using Code editor like Visual studio code toggle the body element and every element inside the body is enveloped, only the open and close tag of the body is been seen, the element inside are the child and this is the easiest way to identify parents and child element. When applying the direct child selector we use the greater than sign > ">"
  <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Contact</li>
</ul>

<div>
    <li>English </li>
    <li>Maths </li>
</div>

ul > li{
text-decoration: none;
}

Descendant Selector

  1. Descendant selector is in a way similar to child selector, while child selector is directly picking an element to assign properties and values to the element, descendant selector drive down to from the first to the last generation of the parent element, as long as the child is inside the element one way or the other, the algorithm will find a way to select the element. When applying this selector use parent element space siblings.
<nav>
  <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Contact</li>
</ul>

<div>
    <li>English </li>
    <li>Maths </li>
</div>
  <li>code review</li>
</nav>

nav li{
text-decoration: none;
}

Class Selector (.)

  1. The class selector help picks group of elements which have been classified as one using a dot > "." , see a class like a group of element which only one element has to represent. We could also pick an example from an athlete who represent a nation in Olympic, though the athlete is the one to partake in the event but what ever the outcome of the athlete is being recorded against the nation of the nation the athlete represent. 
  <h1 class="Classic">lets test this heading</h1>
<p>lets check the paragraph tag</p>
<p class="Classic">I belong to this new group </p>
<div class="Classic">there is no exception to what you can add </div>

.classic{
background-color: #235bbe;
}

Pseudo-class Selector (:)

  1. Pseudo class is a special keyword that is used in changing state an element, we could change the colour, size etc when it is :hover, :active, :visited and many more. We represent pseudo class keyword with a column >":" 
  <h1>ready to change </h1>

h1: hover{
background-color: #235bbe;
}

There are a whole lot of Css selector but this few can get you started, if you intend to advance your study on Css Selectors below are some handful materials you can use

.....One beautiful about positioning of element is that it make you feel more powerful than you can imagine, being able to tell element to do what you want it to do gives you the most useful energy or skill required in Css 
read more.... next blog
css_selector