Open In App

CSS element Selector

Last Updated : 10 May, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

The element selector in CSS is used to select HTML elements that are required to be styled. In a selector declaration, there is the name of the HTML element and the CSS properties which are to be applied to that element is written inside the brackets {}. 

Syntax:

element {
    \\ CSS property
}

Example 1: This example shows the element selector in CSS.

html




<!DOCTYPE html>
<html>
<head>
    <title>element selector</title>
 
    <style>
        /* h1 element selected here */
        h1 {
            color: green;
            text-align: center;
        }
 
        /* h2 element selected here */
        h2 {
            text-align: center;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h2>element Selector</h2>
</body>
</html>


Output:

  

Example 2: This example shows the element selector in CSS.

html




<!DOCTYPE html>
<html>
<head>
    <title>element selector</title>
    <style>
        h1 {
            text-align: center;
        }
 
        h2 {
            text-align: center;
            color: green;
            font: bolder cursive;
        }
 
        form {
            text-align: center;
        }
    </style>
</head>
 
<body>
    <h1>FORM</h1>
 
    <h2>Please fill in details:</h2>
 
    <form action="#">
        Name: <input type="text" value="name"><br>
        Age: <input type="text" value="age"><br>
        City: <input type="text" value="City"><br>
    </form>
</body>
</html>


Output:

  

Supported Browsers: The browser supported by element selectors are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Safari
  • Opera


Previous Article
Next Article

Similar Reads

CSS element,element Selector
The element, element selector in CSS is used to style all comma-separated elements with the same style. Syntax: element, element { /* CSS Property */ } Example 1: C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt; element, element Selector &lt;/title&gt; &lt;style&gt; /* Add same CSS property to all comma separated elements */
1 min read
CSS element element Selector
The element element selector in CSS is used to select elements inside the elements i.e it combines two selectors such that elements matched by the second selector are selected if they have an ancestor element matching the first selector. Syntax: element element { /* CSS Property */ } Example 1: C/C++ Code &lt;!-- HTML code to illustrates space sele
1 min read
CSS element~element Selector
The element ~ element selector in CSS is used to match the second element if it follows the first element (it doesn't need to be immediate). They both should have the same parent element. Syntax: element ~ element { //CSS Property}Example 1: In the below program you can see that "p ~ ul" will select and style only the second unordered list which co
2 min read
CSS element+element Selector
The element + element selector in CSS is used to style every element that is placed immediately after (not inside) the first specified element. Syntax: element + element { //CSS Property}Example 1: In the below program the "p + p" selector selects and styles every pair of consecutive paragraph elements. If there are more than 2 consecutive p elemen
2 min read
CSS element &gt; element Selector
The element &gt; element selector in CSS is used to style only those elements which are the children of the specific parent. The operand on the left of &gt; is the parent and the operand on the right is the children element. Note: Elements that are not directly a child of the specified parent, are not selected. Syntax: element1 &gt; element2 { //CS
2 min read
How to add space (" ") after an element using :after selector in CSS ?
The :after selector in CSS is used to add the same content multiple times after the content of other elements. It inserts something after the content of each selected element. Syntax: :after { // CSS Property}Example 1: This example uses :after selector to add space after an element. C/C++ Code &lt;!-- HTML code to add space after the selected elem
1 min read
How to create a function `generateSelector` to generate CSS selector path of a DOM element ?
In this article, we will learn about CSS selectors, and we will also implement a `generateSelector()` function that returns a string value to provide a valid selector to a target DOM element. What is a CSS Selector? A CSS selector is used to select a group of elements (or nodes in the DOM tree) that follow a certain pattern. Example: Here is an exa
5 min read
Generate CSS Selector for Target Element in JavaScript
When we are working with web development, applying the styles to the elements dynamically is very common for creating interactive web pages. To apply the styles dynamically to the elements, it is very essential to understand the CSS selectors. What is a CSS Selector?A CSS selector is a pattern used to select and style a target HTML element based on
3 min read
jQuery element Selector
jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating the terms, it simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser JavaScript developm
1 min read
jQuery element ~ siblings Selector
The element ~ siblings selector in jQuery is used to select all elements that are siblings of the specified element. Syntax: ("element ~ siblings")Parameter: It contains two parameters as mentioned above and described below: element: It is a required parameter and is used for any valid jQuery selector.siblings: It is a required parameter and is use
1 min read