News

CSS4: 5 tips to add style with pseudo elements

The next level of the CSS spec is already out there. Here we select five new ways to start styling your HTML

CSS4Image

The next level of the CSS spec is already out there. Here we select five new ways to start styling your HTML

CSS4Image

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).


GET THE LATEST ISSUE OF WEB DESIGNER NOW

×