Two Favorite CSS4 selectors – :not() and :matches()

In the CSS4 Specification it says :not() can be used for both selectors and pseudo classes. It will not work with:after or :before, but everything else works great. So lets say you want to apply to everything except links.

*|*:not(:link) {
/* Some CSS */
}

in the code snippet above, *|* is a general “apply to everything” rule. Basically it’ll apply the CSS to all the elements. But here css would be applied to all except the links.

So, the negation pseudo-class, :not(X), is a functional notation taking a selector list as an argument. It represents an element that is not represented by its argument.

NOTE: Negations may not be nested within itself or within :matches(). That means :not(:not(…)) and :matches(:not(…)) are invalid.

Pseudo-elements cannot be represented by the negation pseudo-class; they are not valid within :not().

Now coming over to :matches.

In this example, we condense three rules with identical declarations into one. Thus,

h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }

is equivalent to:

h1, h2, h3 { font-family: sans-serif }

The matches-any pseudo-class, :matches(X), is a functional notation taking a selector list as its argument. It represents an element that is represented by its argument.
In CSS4, only compound selectors are allowed within :matches(): combinators are not allowed. Additionally, :matches() may not be nested within itself or within :not(). :matches(:matches(…)) and :not(:matches(…)) are invalid.
Pseudo-elements cannot be represented by the matches-any pseudo-class; they are not valid within :matches().
Default namespace declarations do not affect the subject of any selector within a matches-any pseudo-class unless the argument is an explicit universal selector or a type selector.

For example, following selector matches any element that is being hovered or focused, regardless of its namespace. In particular, it is not limited to only matching elements in the default namespace that are being hovered or focused.

*|*:matches(:hover, :focus)

The following selector, however, represents only hovered or focused elements that are in the default namespace, because it uses an explicit universal selector within the :matches() notation:

*|*:matches(*:hover, *:focus)


CSS4

 

First of all I would like to start with that there has never been anything like CSS4.
It’s the development of independent modules published after CSS 2.1.

To be more precise and accurate, we might like to explore the content from the following post.
A Word About CSS4

But still in order to explore the latest so called CSS4, we can discuss about the latest selectors that have been developed so as to ease the pain of using javascript / jQuery extensively.

First nice feature I would be discussing would be giving styles to the parent element based on its child element. Consider the following line:

ul > li:hover {color:#ff0000;}

Here li is a child element and ul is a parent element. So, here the color of li will change when list item is hovered.
Introducing the “$” in the syntax. This allows for styling of a parent element (‘ul’ here) based on its child element (‘li’ here). See the example below:

$ul li:hover {color:green;}

Here, if one hovers over a list element, the whole list will turn green. This is a great and dearly needed feature.

Kindly refer to further posts coming in near future to know more features.

Difference between pixels and em

A basic thing in the CSS is the unit of measurement. Pixel and em are both different units of measurement.

A design is said to be perfect when it is pixel perfect. So, we can say that pixel is smaller unit than em.

We have seen many websites with the ability for the readers / users to adjust the font-size according to their comfort levels. (A A A )

Modern browsers can easily do it when we use pixels. But old browsers like IE6, IE7 etc had problems in resizing the font for whole website. There “em” plays a very vital role.

For example, the default font size in some browser is 16px. And 1 em is equal to current font size so that means 1 em is equal 16px.

But still, the problem is when you resize the text, it becomes larger than it should be when made larger, and smaller than it should be when made smaller. So to solve this problem you need to set a default font size in percent (%) fot the body element.

Example:

body {font-size:100%}
h1 {font-size:3.75em} [is equal 60px]
h2 {font-size:2.5 em} [is equal 40px]
p {font-size:1 em} [is equal 16px]