The CssSelector Component

The CssSelector component converts CSS selectors to XPath expressions.

Installation

  1. $ composer require symfony/css-selector

Note

If you install this component outside of a Symfony application, you mustrequire the vendor/autoload.php file in your code to enable the classautoloading mechanism provided by Composer. Readthis article for more details.

Usage

This article explains how to use the CssSelector features as an independentcomponent in any PHP application. Read the Symfony Functional Testsarticle to learn about how to use it when creating Symfony tests.

Why to Use CSS selectors?

When you're parsing an HTML or an XML document, by far the most powerfulmethod is XPath.

XPath expressions are incredibly flexible, so there is almost always anXPath expression that will find the element you need. Unfortunately, theycan also become very complicated, and the learning curve is steep. Even commonoperations (such as finding an element with a particular class) can requirelong and unwieldy expressions.

Many developers — particularly web developers — are more comfortableusing CSS selectors to find elements. As well as working in stylesheets,CSS selectors are used in JavaScript with the querySelectorAll() functionand in popular JavaScript libraries such as jQuery, Prototype and MooTools.

CSS selectors are less powerful than XPath, but far easier to write, readand understand. Since they are less powerful, almost all CSS selectors canbe converted to an XPath equivalent. This XPath expression can then be usedwith other functions and classes that use XPath to find elements in adocument.

The CssSelector Component

The component's only goal is to convert CSS selectors to their XPathequivalents, using toXPath():

  1. use Symfony\Component\CssSelector\CssSelectorConverter;
  2.  
  3. $converter = new CssSelectorConverter();
  4. var_dump($converter->toXPath('div.item > h4 > a'));

This gives the following output:

  1. descendant-or-self::div[@class and contains(concat(' ',normalize-space(@class), ' '), ' item ')]/h4/a

You can use this expression with, for instance, DOMXPath orSimpleXMLElement to find elements in a document.

Tip

The Crawler::filter() methoduses the CssSelector component to find elements based on a CSS selectorstring. See the The DomCrawler Component for more details.

Limitations of the CssSelector Component

Not all CSS selectors can be converted to XPath equivalents.

There are several CSS selectors that only make sense in the context of aweb-browser.

  • link-state selectors: :link, :visited, :target
  • selectors based on user action: :hover, :focus, :active
  • UI-state selectors: :invalid, :indeterminate (however, :enabled,:disabled, :checked and :unchecked are available)Pseudo-elements (:before, :after, :first-line,:first-letter) are not supported because they select portions of textrather than elements.

Several pseudo-classes are not yet supported:

  • :first-of-type, :last-of-type, :nth-of-type,:nth-last-of-type, :only-of-type. (These work with an elementname (e.g. li:first-of-type) but not with ).

Learn more