CSS :fullscreen pseudo-class

CSS :fullscreen pseudo-class

By At 05:51 0

Pseudo Class
CSS has the pseudo-class: fullscreen to show the particular element to full screen on your webpage. If you want to show any particular div in full screen you can use a lot of CSS property and class to show in full screen.

But using this fullscreen so you can not write the more CSS code you can use this show in full screen. See the syntax and example you can easily understand the fullscreen pseudo-class.

Syntax:
:fullscreen

/*-- For Class Name --*/
.className:fullscreen{
 -----
 ----
}

/*-- For ID --*/
#idName:fullscreen{
 -----
 ----
}

/*-- For HTML Tag --*/
tagName:fullscreen{
 -----
 ----
}


CSS:
.fullscreen:fullscreen {
        padding: 42px;
        font-size: 200%;
        background-color: rgb(218, 238, 255);
    }

    .fullscreen:fullscreen>h1 {
        color: rgb(0, 110, 255);
    }

    .fullscreen:fullscreen>p {
        color: rgb(0, 72, 167);
    }

    .fullscreen:fullscreen>button {
        display: none;
    }

HTML
<div class="fullscreen">
    <h1>:fullscreen</h1>
    <p>Click the below button you can view the this messag in the full screen on you screen</p>
    <button onclick="openFullscreen()">View in Full Screen</button>
</div>

Output:

:fullscreen

Click the below button you can view the this messag in the full screen on you screen








Feature Chrome Firefox IE Opera Safari Android iOS
Basic support 2+ 3.5+ 10+ 9.5+ 1.1+ All No

Copyright Labw3