first-line

Description
Syntax
Examples
Links

Description

The first-line pseudo-element for CSS specifies the first line of the originating element.

Syntax

selector::first-line
{
    property: value;
}

<!doctype html>
<html>
<head>
    <style>
        p::first-line
        {
            color: red;
        }
    </style>
</head>
<body>
    <p>first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line</p>
</body>
</html>

2 · JS

<!doctype html>
<html>
<head>
    <style>
        p::first-line
        {
            color: var(--myvar);
        }
    </style>
</head>
<body>
    <button>initial</button>
    <button value="red">value</button><br>
    <p>first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line</p>
    <script>
        function myfunction(myparameter)
        {
            const mytarget = myparameter.target;
            const myproperty = mytarget.value || mytarget.innerHTML;
            document.querySelector(":root").style.setProperty("--myvar", myproperty);
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>

Overview

Search

Download

العربية

česky

Dansk

Deutsch

English

Español

Suomi

Français

Magyar

Bahasa Indonesia

Italiano

日本語

Malagasy

te reo Māori

한국어

Nederlands

Norsk

Polski

Português

Română

Pyccкий

Shqip

Svenska

Wikang Tagalog

українська

Tiếng Việt

简体中文

繁體中文

Overview

Attributes

Elements

Other

Overview

Functions

Properties

Pseudo-Classes

Pseudo-Elements

Units

Overview

AbortController

AbstractRange

AbortSignal

ChildNode

Comment

console

CustomEvent

Declarations

Document

DocumentFragment

DocumentOrShadowRoot

DOMImplementation

DOMStringList

DOMTokenList

Element

Event

EventTarget

HTMLAllCollection

HTMLBaseElement

HTMLCollection

HTMLDialogElement

HTMLElement

HTMLFormControlsCollection

HTMLLinkElement

HTMLOptionsCollection

HTMLOrSVGElement

HTMLVideoElement

Iterations

Location

MutationObserver

MutationRecord

Node

NodeList

NonDocumentTypeChildNode

NonElementParentNode

ParentNode

Prompts

RadioNodeList