By
The next level of the CSS spec is already out there. Here we select five new ways to start styling your HTML
Add style to default values
Select and style with :default
This default option pseudo-class provides the ability to select and style the default element among a collection of the same elements. For example, it can be used to select the default item in a select list, menu or context menu. Its syntax is :default, and is currently supported by desktop Chrome and Firefox.
Attribute case sensitivity
Case-sensitive selection
The CSS2 attribute selector has never been case sensitive, however CSS4 introduces a case-sensitivity selector for attributes. The syntax is like an add-on, or a flag for the attribute selector: [attribute=“value” i] – note it’s the lowercase i that is the case-sensitivity selector. This can be useful for selecting certain filetypes.
Which reading direction?
Styling for document language
The dir pseudo-class, standing for direction, provides the ability to select and style an element by its direction as determined by the document language. The syntax can be used like so :dir(direction), where direction can be ltr or rtl; standing for left to right and right to left respectively. This may be particularly useful for multilanguage websites.
Modify based on languages
Use :LANG to match elements
Like the dir pseudo-class, the lang pseudo-class provides the ability to select and style elements based on the document language as determined by an HTML attribute, HTTP properties orinformation in the page. The syntax is odd as it’s a wildcard selector, :lang(*-language), where language is a two-letter code.
Style HTML5 drag and drop
Work with The :drop dropzone
HTML5 introduced native drag and drop to the web with various attributes for the different aspects required in making the drag-and-drop mechanic work. One of these was a dropzone attribute, and as of CSS4 this attribute can be styled and selected by using the :drop pseudo-class. It takes active, valid, and invalid arguments like so; :drop, :drop(active), :drop(valid), :drop(invalid).
