Some cool CSS selectors’ addition in selectors level 4 – The future. The web is constantly evolving, Some modules of CSS3 has just started making its way, specs are still in development process and more advance level CSS modules have been drafted to evolve it further, which is being referred as "Selectors level 4".
Selectors have been with us since the beginning of CSS. Most awaited selector of level 4 is; Parent Selector of a given element. This advance selector will offer the possibility to target parent of any element without javaScript. There are many such new cool selectors in this level that make website management easier. Parent selector There was no way to select the parent container in CSS but in the W3C draft of selectors level 4, parent selector has been introduced. Any syntax of CSS selectors level 4 mentioned here, could be changed. Logical combinator – :matches, :not. 3D Button Parallax.
Posted at CSS Tricks by Alexander Futekov The introduction of CSS3 resulted in the explosion of beautiful and interesting buttons, styled with gradients, shadows, and borders - often to achieve a 3D effect. The problem with such 3D buttons is a static perspective. The 3D is not always very convincing when you can only see its front and perhaps a bit from an edge or two - even when the page moves and the position of the button on the page moves. Fortunately, we can achieve a realistic perspective effect with the help of 3D transforms to adjust the sides of the buttons. We can do this without modifying existing HTML, by using pseudo elements for the sides.
Before we start, we must first solve a problem. List of Pseudo-Elements to Style Form Controls. Styling form elements is a pain point when developing web applications. Historically, web developers have had to accept the form controls the browser provided with little hope of customization. However, web rendering engines are increasingly adding hooks through pseudo-elements to give authors some control over the display. While all of these pseudo-elements are rendering engine specific (and therefore behind vendor prefixes), they can still be handy for customizing the display for that engine.
The following is my best attempt at compiling a complete list of the pseudo-elements available in Trident, Gecko and WebKit. At the time of this writing Blink is a recent fork of WebKit, so the pseudo-elements provided are identical. A couple of notes: All Trident pseudo-elements listed here were added in IE10 and will not work in earlier versions of Internet Explorer.In WebKit, to style some pseudo-elements you must set the basis element's -webkit-appearance pseudo-class to none.
Trident WebKit. All In The Family: Grouping CSS Selectors. Grouped selectors are one of the most efficient ways of reducing your CSS to tight, clean, easily maintained code, while bringing the benefit of imposing a stronger, more consistent design.
The principle is simple: where properties and values are shared in a stylesheet, join the declarations and selectors into a single group. As one example, it's common to see repeated uses of the same font-family in a stylesheet: It's far more efficient to join the selectors together as a group with shared properties and values, leaving the unique declarations separate: CSS3 Substring Matching Attribute Selectors.
Posted at Team Tree House by Guil Hernandez In the CSS3 selectors module, the W3C introduced a new set of attribute selectors called substring matching attribute selectors for specifically targeting elements whose given attribute begins, ends or contains a certain value. In this article, we’ll learn how these 3 attribute selectors make our CSS more dynamic by allowing us to style elements without the need for additional classes or IDs. "Begins With" Selector – [attr^="val"] The "begins with" selector uses the caret (^) character to match an element with an attribute value beginning with the value specified in the selector.
For example, if we want to target all secure links beginning in "https", we can do something like this: The 30 CSS Selectors you Must Memorize. Posted at nettuts+ by Jeffrey Way Let’s knock the obvious ones out, for the beginners, before we move onto the more advanced selectors. The star symbol will target every single element on the page. The Shapes of CSS. Speech Bubble Arrows that Inherit Parent Color.
Posted at CSS-Tricks Interesting question: css3 speech bubble question: for the "triangle"'s border color, how can I set it to whatever its parent div's bgcolor is automagically? By "css3 speech bubble", Jin means using a pseudo element on a container to add a little pointer arrow (triangle). Not really CSS3, but that's pedantic. Let's say that pink color isn't practical to set in an external CSS file. Setting the container with an inline style is all well and good, but unfortunately there is no inline style for pseudo elements. Bummer. There is a solution though!
Then in our code for the pseudo element, we'll specifically have it inherit the color: Notice that I've applied inherit to border-top-color rather than the shorthand property border-top. View Demo.