Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

The new CSS3 selectors

See in this article the new selectors of the CSS3 and how they can help us to select elements individually, filtering by its attributes, position and state.

With the arrival of the CSS3, applying styles individually has become way easier. The new selectors can identify elements based on it's attributes, the position in which they appear in the parent element, the state (enable, disabled), among other properties.

We'll have here some overview about these selectors and then we shall have practical examples of them.

Attributes selectors

These selectors allow to apply one determined formatting to certain elements based on the value of one attribute. For instance, we can select all the <div> elements that contain the word “bar” on it's id (to superior, inferior, and lateral bars, for example).

We can select the elements which value of its attribute IS EXACTLY, START WITH, FINISH WITH, or CONTAIN the searched value. Lets see right below the syntax:

  • E[attribute=”value”]: Elements of E type which “attribute” is equal to its “value”.
  • E[attribute^=”value”]: Elements of the E type which the value of the “attribute” starts with the word “value”.
  • E[attribute$^=”value”]: Elements of the E type which the value of the “attribute” finishes with the word “value”.
  • E[attribute*=”value”]: Elements of the type E which the value of the “attribute” contains the word “value”.

Let us see in practical terms the functioning of these selectors. For this, we should alterate the content of the file “selectors.css” as on the Listing 2.

Listing 1: Structure of the HTML file for the first example

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="selectors.css"/>
		<style>
			div{border:solid 1px;}
			#header{height:100px;}
			#content {height:300px;}
			#footer{height:100px;}
		</style>
	</head>
	<body>
		<div id="header">header</div>
		<div id="main_content">
			<div id="top_content">top content</div>
			<div id="bottom_content">bottom content</div>
		</div>
		<div id="footer">footer </div>		
	</body>
</html> 

We have defined a special starting formatting just to give the shape to the page and ease the visualization of the style that will be posteriorly applied. The page should have an appearance similar as Figure 1's.

Initial appearance of the example page

Figure 1: Initial appearance of the example page

Listing 2: Example of CSS for selectors of attribute.

div[id="header"]{
	font-size:xx-large;
}

div[id$="content"]{
	height:50%;
}

div[id^="bottom"]{
	background:#87CEEB;
}

div[id*="foo"]{
	background:red;
}

After applying the code of the Listing 2, the page should be as in Figure 2.

Page after application of the selectors of attribute

Figure 2: Page after application of the selectors of attribute

Position selectors

These selectors work based on the position of the element in the document or in the control that contains it (parent element). For instance, we can select the second element inside a div, no matter it's type.

  • :root: selects the root element of the document, in this case, the HTML tag.
  • E:nth-child(N): selects the element of the E type that is the Nth child of his father element.
  • E:nth-last-child(N): similar to the previous, but starting the counting backwards.
  • E:nth-of-type(N): selects the element that is the Nth of it's type.
  • E:nth-last-of-type(N): similar to the previous one, but counting backwards.
  • E:last-child: selects the E element that is the last child of it's parent element.
  • E:first-of-type: selects the E element that is the first of it's type inside the parent element.
  • E:last -of-type: like the last one, but works to the last element.
  • E:only-child: selects the E element that is the only child of it's parent element.
  • E:only-of-type: selects the element that is the only child of a type inside it's parent element.

To visualize the functioning of the selectors of position, we'll use the following HTML structure:

Listing 3: Structure of the HTML file for the second example

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="selectors.css"/>
		<style>
			div{border:solid 1px; height:100px;}
		</style>
	</head>
	<body>
		<div id="bar_1"></div>
		<div id="bar_2">
			<p>Paragraph 1</p>
			<p>Paragraph 2</p>			
		</div>	
		<div id="bar_3">
			<ul>
				<li>item 1</li>
				<li>item 2</li>
				<li>item 3</li>
			</ul>
		</div>
		<div id="bar_4">
			<p>Paragraph 3</p>
		</div>
	</body>
</html> 
 

The page should be, initially, as shows the Figure 3.

Initial appearance of the page in the second example.

Figure 3: Initial appearance of the page in the second example.

Now, we'll alter the content of the file “selectors.css” as it is on the Listing 4.

Listing 4: Examples of CSS to selectors of position.

div:nth-child(1){
	background:red;
}

div:nth-last-child(2){
	background:#AB82FF;
}

li:nth-of-type(1){
	color:green;
}

li:nth-last-of-type(1){
	color:yellow;
}

div:last-child{
	background:orange;
}

div:first-of-type{
	border:solid 5px green;
}

div:last-of-type{
	border:solid 5px brown;
}

p:only-child{
	font-size:30px;
}

ul:only-of-type{
	text-decoration:underline;
}

Then, after applied the code on the Listing 4, the page should be similar to the Figure 4.

Page after applying the selectors of position

Figure 4: Page after applying the selectors of position

State selectors

This ones, on the other hand, work based on the actual state of the control (empty, enabled, disabled, etc). Hereafter, each one is explained, easing the understanding.

  • E:empty: selects the E element that is empty, with no child element.
  • :target: selects the target element of an internal link (the ones that are preceded by # that directs the user to an element on the page).
  • E:enabled: selects the E element that is enabled to the user.
  • E:disabled: similar to the previous one, but to disabled elements.
  • E:checked: selects checked elements (radios and checkboxes).
  • ::selection: formats the content selected by the user.
  • :not(P): selects the elements that do not respond to the simple P selector.
  • E~F: selects every F element that is preceded by an element E.

We'll see, hereafter, a few examples of the use of these selectors. For this, we shall use the following HTML structure:

Listing 5: Structure of the HTML file for the third example

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="selectors.css"/>
		<style>
			div{border:solid 1px; height:100px;}
		</style>
	</head>
	<body>
		<h1>Select this text</h1>
		<p><a href="#Text1">Link to Text 1</a></p>
		<p><a href="#Text2">Link to Text 2</a></p>
		<div>			
			<p id="Text1">This is the TEXT 1</p>
			<p id="Text2">This is the TEXT 2</p>
		</div>
		<div id="emptyDiv"></div>
		<div>
			<span>Span before input</span><br/>
			<input type="checkbox" checked="checked" value="Option 1">Option 1
			<input type="checkbox"  value="Option 2">Option 2	
			<input type="text" disabled="disabled" value="disabled"/>
			<input type="text" value="enabled"/><br/>
			<span>Span after input</span>
		</div>
	</body>
</html> 
 

The page should have the following layout:

Initial appearance of the page in the third example

Figure 5: Initial appearance of the page in the third example

And once again we'll alter the content of the file “selectors.css”, but this time according to the Listing 6.

Listing 6: Example of CSS for state selectors

:target{
	color:green;
	font-weight:bold;
}

::selection{
	color:red;
}

:empty{
	border:solid 1px;
	height:50px;
	background:gray;
}

input:checked{
	text-decoration:underline;
}

h1
{
	font-family:"Courier New";
}

:not(h1)
{
	font-family:"Arial";
}

input~span{
	color: orange;
}

input:disabled{
	border:solid 1px red;
	background-color: silver;
	height:25px;
}

input:enabled{
	border:solid 1px blue;
	background-color: #fff;
	height:25px;
}

Have doing this, the page must assume the shape showed on the Figure 6.

Page after applying the state selectors

Figure 6: Page after applying the state selectors

As we could see, the many CSS3 selectors enable us access the specific controls in our HTML structure, easing, for instance, the conditional formatting of these elements.

We finish this article here, and I hope it has been of help. Thanks for the attention of the reader.

See you next time.



Microsoft MVP, Bachelor in Science And Technology, Editor and Consultant at DevMedia with more than 7 years of experience in software development.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login