CSS Selectors



what is CSS Selector

A CSS selector is a pattern to identify the elements on a web Document. The styles associated with that selector will be applied to the HTML elements that match the selector pattern. Selectors are one of the most important part of CSS as Selectors allow you to target elements on your web Document in various ways so that they can be styled.


CSS Universal Selector

The CSS universal selector determine by *. it matches every single element on the web document.

Example

<!DOCTYPE html>
    <html>
    <head>
      <title>Example of CSS universal selector</title>
      <style>
        * {
            margin: 0;
            padding: 0;
        }
      </style>
    </head>
    <body>
      <h1>This is heading</h1>
      <p>This is a paragraph.</p>
    </body>
    </html>
  


Click on the "Run This Code" button to see how it works.

CSS Element Selector

HTML element selector An component sort selector matches all instance of the component within the document with the corresponding element sort name. Let's try associate degree example to visualize however it really works.

Example

<!DOCTYPE html>
    <html>
    <head>
      <title>CSS element type selector</title>
      <style>
        h1 {
          color: red;
        }
        
      </style>
    </head>
    <body>
      <h1>This is heading</h1>
      
    </body>
    </html>
    


Click on the "Run This Code" button to see how it works.

CSS Id Selector

The id selector is used to determine styles for a unique element.

It is define with a # symbol.

Example

<!DOCTYPE html>
    <html>
    <head>
    
      <title>CSS id selector</title>
      <style>    
        #myid {
            color: red;
        }
      </style>
    </head>
    <body>
      <h1 id="myid">This is a warning!</h1>
    </body>
    </html>
    


Click on the "Run This Code" button to see how it works.

CSS Class Selector

The class selector is used to select an HTML element that has class attribute.

The class selector is define with a dot .

Example

<!DOCTYPE html>
    <html>
    <head>
      <title> CSS class selector</title>
      <style>    
        .red {
            color: red;
        }
      </style>
    </head>
    <body>
      <h1 class="red">This is a heading</h1>
      <p class="red">This is a paragraph.</p>
      
    </body>
    </html>
    


Click on the "Run This Code" button to see how it works.

CSS Grouping Selectors

if you want to add same styles to all heading elements,that time you will this option.

Example

<!DOCTYPE html>
<html>
<head>
<title>CSS Grouping Selectors</title>
<style>
	h1, h2, h3 {
		font-weight: bold;
	}
	h1 {
		font-size: 40px;
        color: red;
	}
	h2 {
		font-size: 27px;
      color: yellow;
	}
	h3 {
		font-size: 20px;
      color: blue;
	}
</style>
</head>
<body>
	<h1>This is a heading of level 1</h1>
	<h2>This is a heading of level 2</h2>
	<h3>This is a heading of level 3</h3>
</body>
</html>


Click on the "Run This Code" button to see how it works.




CSS

Welcome CSS Syntax CSS Selectors CSS ADD css CSS Borders CSS Backgrounds CSS Colors CSS Padding CSS Margin CSS Fonts CSS Text CSS Outline CSS Box-Model CSS Height&Width CSS Icons CSS Links CSS Lists CSS Display CSS Tables CSS Position CSS Overflow CSS Align CSS Float CSS Inline-block CSS Opacity CSS Image-Gallery CSS Navigation Bar CSS Dropdowns CSS Cursors CSS Forms CSS Pseudo-classes CSS Pseudo-elements

CSS3 FEATURES

CSS Gradients CSS shadows CSS 2D Transforms CSS 3D Transforms CSS Animations CSS Media Queries CSS Flexbox CSS important CSS Units