<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget velit nec sem bibendum ullamcorper. Nam vehicula vehicula arcu, eleifend blandit enim varius sed. Suspendisse accumsan erat non dolor mattis viverra vel at odio. Aenean vel sem egestas, iaculis metus non, consequat velit. Cras feugiat odio non bibendum tincidunt.
</p>
<p id="select_p">
	Vivamus non orci eget felis facilisis pharetra. Proin quis nunc tincidunt, aliquet dui nec, elementum libero. Proin efficitur orci sit amet nulla fermentum pharetra. Mauris accumsan ipsum sit amet lacus malesuada, at auctor enim fringilla. Vestibulum sit amet turpis sit amet sapien posuere ullamcorper. Etiam ac aliquet lorem. Phasellus pulvinar risus eu pretium molestie.
</p>
body {
	font-family: arial;
	font-size: 0.9em;
}

p {
	width: 25%;	
}

p:first-child::first-line {
	color: red;
}

:first-child::first-letter {
	color: blue;
	font-size: 2.2em;
	font-weight: bold;
	float: left;
	margin: -3px 3px 0 0;
	padding: 0;
}

::selection {
	color: #fff;
	background-color: #777;
}
document.addEventListener("DOMContentLoaded", function(event) {
    var range = document.createRange();
    var selection = window.getSelection();
    range.selectNodeContents(document.getElementById('select_p'));
    
    selection.removeAllRanges();
    selection.addRange(range);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.