The CssSelector Component ¶

The CssSelector component converts CSS selectors to XPath expressions.
CssSelector コンポーネントは、CSS セレクターを XPath 式に変換します。

Installation ¶

    
                        $ composer require symfony/css-selector

Note

ノート

If you install this component outside of a Symfony application, you must require the vendor/autoload.php file in your code to enable the class autoloading mechanism provided by Composer. Read this article for more details.

このコンポーネントを Symfony アプリケーションの外部にインストールする場合は、Composer が提供するクラス自動ロードメカニズムを有効にするために、コード内に vendor/autoload.php ファイルを必要とする必要があります。詳細については、この記事をお読みください。

Usage ¶

Why Use CSS selectors? ¶

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

HTML または XML ドキュメントを解析する場合、最も強力なメソッドは XPath です。

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

XPath 式は非常に柔軟であるため、ほとんどの場合、必要な要素を見つける XPath 式が存在します。残念ながら、それらは非常に複雑になる可能性もあり、学習曲線は急勾配です。一般的な操作 (特定のクラスを持つ要素を見つけるなど) でさえ、長くて扱いにくい式が必要になる場合があります。

Many developers -- particularly web developers -- are more comfortable using CSS selectors to find elements. As well as working in stylesheets, CSS selectors are used in JavaScript with the querySelectorAll() function and in popular JavaScript libraries such as jQuery.

多くの開発者 (特に Web 開発者) は、CSS セレクターを使用して要素を見つけることに慣れています。 CSS セレクターは、スタイルシートでの作業と同様に、JavaScript の querySelectorAll() 関数や、jQuery などの一般的な JavaScript ライブラリーで使用されます。

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

CSS セレクターは XPath ほど強力ではありませんが、記述、読み取り、理解がはるかに簡単です。それらはそれほど強力ではないため、ほとんどすべての CSS セレクターを XPath の同等のものに変換できます。この XPath 式は、ドキュメント内の要素を検索するために XPath を使用する他の関数やクラスで使用できます。

The CssSelector Component ¶

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

コンポーネントの唯一の目的は、toXPath() を使用して、CSS セレクターを XPath に相当するものに変換することです。

    
                        use Symfony\Component\CssSelector\CssSelectorConverter;

$converter = new CssSelectorConverter();
var_dump($converter->toXPath('div.item > h4 > a'));

This gives the following output:

これにより、次の出力が得られます。

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

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

この式を DOMXPath や SimpleXMLElement などと一緒に使用して、ドキュメント内の要素を検索できます。

Tip

ヒント

The Crawler::filter() method uses the CssSelector component to find elements based on a CSS selector string. See the The DomCrawler Component for more details.

Crawler::filter() メソッドは、CssSelector コンポーネントを使用して、CSS セレクター文字列に基づいて要素を検索します。詳細については、DomCrawler コンポーネントを参照してください。

Limitations of the CssSelector Component ¶

Not all CSS selectors can be converted to XPath equivalents.

すべての CSS セレクターを同等の XPath セレクターに変換できるわけではありません。

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

Web ブラウザーのコンテキストでのみ意味をなす CSS セレクターがいくつかあります。

link-state selectors: :link, :visited, :target
リンク状態セレクター: :link、:visited、:target
selectors based on user action: :hover, :focus, :active
ユーザーアクションに基づくセレクター: :hover、:focus、:active
UI-state selectors: :invalid, :indeterminate (however, :enabled, :disabled, :checked and :unchecked are available)
UI 状態セレクター: :invalid、:indeterminate (ただし、:enabled、:disabled、:checked、:unchecked は使用可能)

Pseudo-elements (:before, :after, :first-line, :first-letter) are not supported because they select portions of text rather than elements.

疑似要素 (:before、:after、:first-line、:first-letter) は、要素ではなくテキストの一部を選択するため、サポートされていません。

Pseudo-classes are partially supported:

疑似クラスは部分的にサポートされています:

Not supported: *:first-of-type, *:last-of-type, *:nth-of-type and *:nth-last-of-type (all these work with an element name (e.g. li:first-of-type) but not with the * selector).
サポートされていない: *:first-of-type、*:last-of-type、*:nth-of-type、*:nth-last-of-type (これらはすべて要素名で機能します (例:li:first- of-type) を使用しますが、* セレクターは使用しません)。
Supported: *:only-of-type.
サポート: *:タイプのみ。

Learn more ¶

Testing
テスト
The DomCrawler Component
DomCrawler コンポーネント