<style>
    #first-letter:first-letter {
        color: black;
    }

    .green #first-letter:first-letter {
        font-size: xx-large;
    }

    #first-line:first-line {
        color: black;
    }

    .green #first-line:first-line {
        font-size: xx-large;
    }

    .green #first-line-inherit:first-line {
        font-size: xx-large;
    }

    .green input::placeholder {
        color: green;
    }
</style>
<body>
    <div id="first-letter">
        The first letter in this sentence should be larger than the rest.
    </div>
    <div id="first-line">
        This sentence should be extra-extra-large.
    </div>
    <div id="first-line-inherit">
        <span>This sentence should be extra-extra-large too.</span>
    </div>
    <input type="search" placeholder="This should be green">
    <script>
        var target = document.body;
        target.offsetTop;
        target.className = "green";
    </script>
</body>