DZone
Web Dev Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > Meet the CSS4 Selectors

Meet the CSS4 Selectors

Catalin  Red user avatar by
Catalin Red
·
Mar. 30, 12 · Web Dev Zone · Interview
Like (0)
Save
Tweet
7.39K Views

Join the DZone community and get the full member experience.

Join For Free

You may already know that, when speaking about web development, CSS3 and HTML5 are the two main buzz words. This matter might change in the future because, almost two months ago, the latest CSS Selectors Level 4 Working Draft was released by the World Wide Web Consortium (W3C).

In this article you’ll find out some interesting stuff about the new CSS4 selectors.

As an introduction, you should know that these CSS4 selectors specifications are quite new and no browser actually supports any of the below features yet. Further, I hope this will change.

So let’s see below some great new CSS4 stuff:

The “parent” selector

Before, there was no option to select the parent of an element in CSS (not even CSS3). With CSS4, the most important news in the current W3C draft is the support for the parent selector.

$ul li:hover{
    background: #fff;
}

Using the above, when hovering an list element, the whole unordered list will be somehow highlighted by adding a white background to it.

Another example I’m thinking about now is when using HTML forms: for example we could highlight a HTML fieldset when one of its inputs is focused:


Fieldset highlighted when an inner input is focused

$fieldset input:focus{
    background
: #f3eab1;
}

Matches-Any Pseudo-class

The :matches() CSS4 selector is the standardized version of Mozilla’s :-moz-any() pseudo class. This new proposal can simplify the process of writing complex CSS.

Here’s a quick example:

:matches(section, article, aside) h1 {
    font
-size: 2em;
}

as an abbreviation for:

section h1, article h1, aside h1 {
    font
-size: 2em;
}

Other CSS4 pseudo-class selectors

The :indeterminate pseudo-class applies to UI elements whose value is in an indeterminate state. For example, radio and checkbox elements can be toggled between checked and unchecked states, but are sometimes in an indeterminate state, neither checked nor unchecked. Similarly a progress meter can be in an indeterminate state when the percent completion is unknown.

The :nth-match(an+b of selector-list) pseudo-class notation represents an element that has a parent and has an+b-1 siblings that match the given selector-list before it in the document tree, for any zero or positive integer value of n.

Conclusion

We never get bored when it comes about new web technologies. I remember somebody said something like: We (developers) are living in exciting times. True.

Also, I’d strongly recommend you to read more about CSS4 selectors here:

  • W3C Working Draft 29 September 2011
  • What’s slated for CSS4 Selectors?

If you enjoyed this article, you might also like:

  • CSS3 loading animation experiment
  • CSS3 signup form
  • CSS pitfalls and how to overcome them
  • Fancy FAQ page using CSS3 only
  • CSS3 ordered list styles

 

CSS

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • What Is High Cardinality?
  • What Developers Need to Know About Table Partition Pruning
  • Artificial Intelligence (AI) And Its Assistance in Medical Diagnosis
  • SQL vs. NoSQL: Pros and Cons

Comments

Web Dev Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo