Css Selectors

Cascading Style Sheets(CSS) is used to style the HTML elements. CSS is the stylesheet language which is responsible for the webpages to look more responsive and beautiful. The content that is displayed on the webpages is written in HTML and the way the webpage looks responsive or beautiful is because of CSS.

UNIVERSAL SELECTOR Selector in this case is *. All elements in the HTML code are subject to the properties listed in this selector.

<style>
* {
    background-color:  #1d1d1d;
    color:#ffffff;
    font-size: 20px;
   }
</style>

HTML

<body>
<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>
</body>

OUTPUT

INDIVIDUAL SELECTORS Also known as an element type selector, this tool selects an element and applies CSS properties specifically to that element.

CSS Code

<style>
h1 {
    background-color:  #E07C24;
   }
</style>

HTML Code

<body>
<h1>This is heading1</h1>
<p>This is a paragraph.</p>
</body>

OUTPUT

Class and id Selector

The class selector is a method for choosing items that belong to a particular class. To style a specific element with a class name, we use a dot (.) followed by the class name. Id selectors are a special technique to choose elements by their id names. To style a specific element with an id name, we use the hashtag (#) followed by the name.

Keep in mind that several class names can be used within an element, and multiple elements can share the same class name. not though with id. It is distinct, and each element only has one distinct id.

.bg-black {
        background-color: #1a1919;
      }
      .text-white {
        color: #ffffff;
      }
      #para {
        font-size: 25px;
        background-color: #007906;
      }
/* HTML CODE*/
<p id="para">We all know paragraph</p>
    <ul>
      <li class="bg-black text-white">item1</li>
      <li>item2</li>
    </ul>

Combined Selector

Here we use comma (,) separated by multiple elements. Where properties applied to the multiple elements.

span, h1, div {
        font-weight: bold;
        font-style: italic;
        color: #4d8f4d;
      }
/* HTML CODE*/
    <div>Welcome to live class</div>
    <span>Span is just a span, nothing more</span>
    <p id="para">We all know paragraph</p>

Inside an element Nested tags or elements are indicated by spaces between the elements.

Direct Child Selector

The name itself says that only direct child elements are styled with respective properties. Symbol used is (>).

div>li {
      background-color: #39526b;
      color: #ffffff;
    }
/* HTML Code*/
<div>
    <li>awesome</li>
    <ul>
      <li>highlight me</li>
      <li>highlight me</li>
    </ul>
  </div>

PSEUDO SELECTORS

name

Submit

::before pseudo selector

The content is displayed before the selector element. CSS Code .imp-label::before { content: "This is displayed before name "; background-color: #bdc91c; }

::after pseudo selector

The content is displayed after the selector element. CSS Code .imp-label::after { content: "This is displayed after name "; background-color: #bdc91c; }

:hover

When Hover is being moved on an particular element, properties are applied.li:hover { background-color: #392646; color: #ffffff; } /HTML Code/

item2
item3
item4
item5

:focus selector

When we focused or selected a particular element the properties are applied. Code Snippet

input:focus {
      background-color: #008f64;
      color: #ffffff;
    }
/*HTML CODE*/
<input type="text" name="" placeholder="email" id="" />

Gyaan

Gyaan

Css Selectors