#pseudo class

[Học CSS] Một vài Pseudo Class đơn giản

Đây có thể nói là bài hướng dẫn chi tiết từng tính năng trong CSS cuối cùng của serie Học CSS đơn giản này và các bài sau chúng ta sẽ làm qua một số ví dụ thực tế. Trước khi bắt đầu với một số ví dụ đó, mình muốn nói qua một xíu về Pseudo Class– một tính năng trong CSS3 mà mình sẽ nói kỹ hơn ở serie CSS nâng cao sau này. Bởi vì trong các tutorial sau, chúng ta sẽ cần sử dụng một vài Pseudo class…

A CSS pseudo-element is used to style specified parts of an element. For example, it can be used to:

Style the first letter, or line, of an element

Insert content before, or after, the content of an element

Have you ever seen an code similar to this?

#example:before { content:"#"; }

Maybe? The ":before" part? Want to know how that works/what it does? Read this article, it has everything you need to know about pseudo-elements/classes. I'd make a tutorial, but everything is there. If you want something specific, shoot us a message.

This might also be helpful.

Say we have a grid of tiles, and we want to alternate the colors between three colors (red, green, blue), we could use the :nth-child() pseudo-class selector to accomplish this with 3n+1, 3n+2, and 3n+3.

Now, what happens when we only want to alternate the colors of specific tiles within all the tiles? You might think to simply add another class to your tiles, and apply the :nth-child() to that class.

Odd, that's not what we're looking for, even though we've only applied the :nth-child() selector to .color it seems to be taking into account every tile on the page; it looks like the CSS engine in the browser is taking into account that .color is applied to a li element and counting and applying n-values from to all li elements rather than just li.color elements as is specified.

The intended output is accomplished with a little JavaScript.

Tested on: Chrome 28.0.1500.95, Firefox 23.0, Safari 6.0.4

With HTML5 quickly becoming a standard there are lots of new techniques we’ll need to learn to master both its form and function. I just discovered an awesome CSS pseudo-class for styling text created with the HTML5 attribute placeholder:

input::-webkit-input-placeholder {    color: #bdc4d1; } input:-moz-placeholder {    color: #bdc4d1; }

Artículo muy interesante sobre las pseudo class para HTML+CSS.