Conditional selector depends on child nodes

ul(a:hover) {property:value;}

Code means select ul element that contains a element with hover statement.

Example

<style type="text/css">
	ul { background-color: #999; }
	ul a:link { color: blue; }
	ul a:hover { color: red; }
	</style>
	
	<ul>
		<li><a href="/products">products</a>
		<li><a href="/store">store</a>
		<li><a href="/products">blog</a>
		<li><a href="/support">support</a>
		<li><a href="/community">community</a>
	</ul>

This code may render like following image.

And I want to change background color of ul element. So how? With javascript? See next code.

<style type="text/css">
	ul { background-color: #999; }
	ul(a:hover) { background-color: yellow; }
	ul a:link { color: blue; }
	ul a:hover { color: red; }
	</style>
	
	<ul>
		<li><a href="/products">products</a>
		<li><a href="/store">store</a>
		<li><a href="/products">blog</a>
		<li><a href="/support">support</a>
		<li><a href="/community">community</a>
	</ul>

This code may render like following image.

Mask (foreground)

Mask is properties like Background property. Background stands behind of contents, but Mask stands front of contents. Mask has 6 properties like Background’s and opacity property.

Mask must not influence on handling of contents. For Example, drag, right click on mouse, and so on.

Mask Properties

mask-color

same with background-color property.

mask-image

same with background-image property.

mask-repeat

same with background-repeat property.

mask-attachment

same with background-attachment property.

mask-position

same with background-position property.

mask

same with background property. But mask property can have mask-opacity property additionally.

mask-opacity

Like opacity property, mask-opacity property set opacity of mask. This doesn’t influence except mask, like contents, child nodes, and so on.

Example

There are one picture and one image for mask.

With the mask image, make decoration for the picture!

<style type="text/css">
	#miya {
	    mask-image: url(mask.gif);
	    mask-attachment: repeat;
	}
	</style>
	
	<img src="picture.jpg" id="miya" />

This code may render like following image.

Finally, make it better with mask-opacity property.

<style type="text/css">
	#miya {
	    mask-image: url(mask.gif);
	    mask-attachment: repeat;
	    mask-opacity: .3;
	}
	</style>
	
	<img src="picture.jpg" id="miya" />

Follwing image is the final result.

hsize (horizontal size), vsize (vertical size)

New size mechanism of CSS Box Model. width means space except padding, border, margin. But hsize means space except margin but include padding, border.

See the next image.

If I want to set this 2 box with 100% width of browser, hsize property will useful!

<style type="text/css">
	#box1 {
		float: left;
		hsize: 80%;
		padding: 1em;
		border: 1px solid red;
		background-color: gray;
	}
	#box2 {
		float: right;
		hsize: 20%;
		padding: .5em;
		border: 1px solid black;
	}
	</style>
	
	<div id="box1">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat</p>
	</div>
	<div id="box2">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna</p>
	</div>

rotation

#test { rotation: 15; margin: 10px; border: solid #000 1px; padding: 10px; }

rotation property rotate element clockwise with given angle (number). margin must not influence on rotation, but padding, border must calculate with rotated element. child nodes of rotated element must positioned depend on rotated statement of parent element.

If rotation property is given, width and height cannot declare with percent.