CSS font-variant-position Property

CSS element() Function

Last Updated : 08 Jun, 2023

The element() function of CSS is used to place the image in one tag from another element present on the page. The image shows changes as the changes are made in another HTML element.

Syntax:

element(id)

Parameters: This function takes the id of the HTML element.

Note: This function does not work with class tag and please run the code in Firefox.

Example:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
                initial-scale=1.0">
    <title>CSS element() Function</title>
</head>
<style>
    * {
        color: #fff;
        font-size: 20px;
    }
 
    .container {
        padding: 10px;
        width: fit-content;
        height: auto;
        background: -moz-element(#bg1);
    }
 
    #bg1 {
        text-align: center;
        width: fit-content;
        height: 300px;
        background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/20200714125445/b-300x173.JPG");
    }
</style>
 
<body>
    <div class="container">
        Text from container
    </div>
 
    <div style="overflow:hidden; height:0;
            width:fit-content;">
        <div id="bg1">Text from bg1</div>
    </div>
</body>
</html>

Output:

Browsers supported:

Mozilla Firefox
Firefox for android

CSS font-variant-position Property

T

tarun007

Improve

Article Tags :

Similar Reads

CSS element Selector

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:

CSS Pseudo Elements

A pseudo-element is a keyword added to a selector that lets you style specific parts of an element. For example, you can style the first line of a paragraph, add content before or after an element, or create complex effects with minimal code. Pseudo-elements are denoted by a double colon (::) (or :

AngularJS angular.element() Function

The angular.element() Function in AngularJS is used to initialize DOM element or HTML string as an jQuery element. If jQuery is available angular.element can be either used as an alias for the jQuery function or it can be used as a function to wrap the element or string in Angular's jqlite. Syntax:

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: [GFGTABS] html <!DOCTYPE html> <html> <head> <title> element, element Selector </title> <style> /* Add s

CSS element+element Selector

The element+element selector in CSS is a sibling combinator used to style an element that is immediately preceded by another specified element. It targets the second element only if it immediately follows the first element in the document structure. Syntax element1 + element2 { /* styles */}element1

CSS element > element Selector

The element > element Selector in CSS is used to select direct child elements of a specified parent element. This selector ensures that the style is applied only to elements that are directly nested within another element, ignoring any deeper nested elements. Direct child selection: Targets only

CSS Element Element Selector

The element element selector (without the > symbol) selects all descendant elements of a specified parent element. It applies styles not only to direct children but also to any deeper nested elements, making it more general than the direct child selector. Descendant selection: Targets all nested

CSS Introduction

CSS (Cascading Style Sheets) is a language designed to simplify the process of making web pages presentable. It allows you to apply styles to HTML documents by prescribing colors, fonts, spacing, and positioning.The main advantages are the separation of content (in HTML) and styling (in CSS) and the

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

CSS attr() Function

The attr() function is an inbuilt function in CSS that returns the value of an attribute of the selected elements. Syntax: attr( attr_name )Parameter: This function accepts a single parameter attr_name which is used to hold the name of the attribute in an HTML element. It is a mandatory parameter. R