CSS Pseduo-elements allow you to style certain parts of a document. In this article, we will see how to change the default selection style of your web page contents using ::Selection PseudoElement.
Although you can use any webeditor of your choice, I am using Visual Studio 2013 for this demonstration. Let’s start by creating a new ASP.NET Web application. Start Visual Studio and click on New Project. Choose the Web Category and choose ASP.NET Web Application as shown below –
Next choose Web Form with an Empty template as shown below –
Once your web application is created, add a new HTML page with the name “ArticleHighlights.html” in your web application.
Now add the following contents in your web application as shown below –
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 ::Selection Example</title>
</head>
<body>
<div>
<div id="div1">
<h1>HTML5 and CSS 3 in ASP.NET 4.5 – Part 1 </h1>
<p>In the first part of ‘HTML5 ...</p>
</div>
<div id="div2">
<h1>Most Popular .NET, jQuery and Web Development articles in 2013</h1>
<p>With 2014 fast approaching and ...</p>
</div>
</div>
<div>
<div id="div3">
<h1>Create Triangles using Plain CSS and No Images</h1>
<p>If someone asks you to ...</p>
</div>
<div id="div4">
<h1>CSS: after and before Pseudo Elements</h1>
<p>Pseudo elements are not new ...</p>
</div>
</div>
</body>
</html>
In the above HTML, we have added couple of <div/> tags with child elements like <h1/> for heading and <p/> for text display. If you are using an ASP.NET page, you can replace the divs with Panels.
We have two outer divs which contains two inner divs respectively. Once you are through with the design, we will now style the contents. If you see, we haven’t applied any styles to our divs.
We will add a CSS file to style the contents of our web page. Let’s add a Stylesheet in our project with the Styles.css and add following styles to our Divs –
Once you write the styles shown above in our Styles.css file, apply the CSS classes .divOuter1 and .divOuter2 to both the outer divs. Similarly apply .divInner1 and .divInner2 to our inner divs respectively.
Now run the web page by pressing “F5” and you will see four divs with an article title and description about them as shown here –
Now let’s try selecting the contents of each div and check its foreground color and background color. You will notice the selection as shown below –
This is a default selection of the web page contents. So the question is, can we change/override the default selection? And the answer is YES, we can change the default selection.
Let’s add the following CSS in our Styles.css file to change the default selection –
The above CSS makes use of ID selector and applies the ::selection to all the elements which are there in our divs to change the background color and foreground color.
Now hit “F5” and run the page. After that select the contents of each div and you should see the output as shown below –
Summary – In this article we have seen how to change the default selection style of your web page contents by using CSS ::Selection PseudoElement.
Although you can use any webeditor of your choice, I am using Visual Studio 2013 for this demonstration. Let’s start by creating a new ASP.NET Web application. Start Visual Studio and click on New Project. Choose the Web Category and choose ASP.NET Web Application as shown below –
Next choose Web Form with an Empty template as shown below –
Once your web application is created, add a new HTML page with the name “ArticleHighlights.html” in your web application.
Now add the following contents in your web application as shown below –
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 ::Selection Example</title>
</head>
<body>
<div>
<div id="div1">
<h1>HTML5 and CSS 3 in ASP.NET 4.5 – Part 1 </h1>
<p>In the first part of ‘HTML5 ...</p>
</div>
<div id="div2">
<h1>Most Popular .NET, jQuery and Web Development articles in 2013</h1>
<p>With 2014 fast approaching and ...</p>
</div>
</div>
<div>
<div id="div3">
<h1>Create Triangles using Plain CSS and No Images</h1>
<p>If someone asks you to ...</p>
</div>
<div id="div4">
<h1>CSS: after and before Pseudo Elements</h1>
<p>Pseudo elements are not new ...</p>
</div>
</div>
</body>
</html>
In the above HTML, we have added couple of <div/> tags with child elements like <h1/> for heading and <p/> for text display. If you are using an ASP.NET page, you can replace the divs with Panels.
We have two outer divs which contains two inner divs respectively. Once you are through with the design, we will now style the contents. If you see, we haven’t applied any styles to our divs.
We will add a CSS file to style the contents of our web page. Let’s add a Stylesheet in our project with the Styles.css and add following styles to our Divs –
Once you write the styles shown above in our Styles.css file, apply the CSS classes .divOuter1 and .divOuter2 to both the outer divs. Similarly apply .divInner1 and .divInner2 to our inner divs respectively.
Now run the web page by pressing “F5” and you will see four divs with an article title and description about them as shown here –
Now let’s try selecting the contents of each div and check its foreground color and background color. You will notice the selection as shown below –
This is a default selection of the web page contents. So the question is, can we change/override the default selection? And the answer is YES, we can change the default selection.
Let’s add the following CSS in our Styles.css file to change the default selection –
The above CSS makes use of ID selector and applies the ::selection to all the elements which are there in our divs to change the background color and foreground color.
Now hit “F5” and run the page. After that select the contents of each div and you should see the output as shown below –
Summary – In this article we have seen how to change the default selection style of your web page contents by using CSS ::Selection PseudoElement.
No comments:
Post a Comment