Element Selectors

PHPFront is built for templates and their elements. How do you find elements to work with?
Element Selectors!
Many functions in PHPFront require this as their first parameter. For example, the PHPFront::assign() function accepts a string of element selector as its first argument. The Chapter Assigning Data shows how to use this function.

An element selector could be any valid CSS selector, or an XPath query. And if a selector applies to more than element, they will all be parsed the same. Below, we give a few examples of each type of selector.

This chapter is not meant to be a reference for CSS Selectors and XPath, at least not for now.
A million tutorials and references exist on the internet for CSS and XPath. But this should get you started.

Selectors

CSS Selectors

CSS Selector is at the root of front-end design. How fitting that PHPFront has support for it. In fact, it is the default selector type of PHPFront – except where specified otherwise.
Here are quick examples:

      
      
        // Tag Selector
        $PHPFront->assign('div', $data);
        
        // ID Selector
        $PHPFront->assign('#menu', $data);
        
        // Class selector
        $PHPFront->assign('.text_box', $data);
        
        // Attribute selector
        $PHPFront->assign('a[target="_blank"]', $data);
        
        
        // Parent > Child selector
        $PHPFront->assign('#menu > li', $data);
        
        // Ancestor Descendant selector
        $PHPFront->assign('ul li', $data);
        
        // Element ~ Sibling selector
        $PHPFront->assign('h1 ~ p', $data);
        
        // lement + Immediate Sibling selector
        $PHPFront->assign('h1 + p', $data);
        
        // ID with Class selector
        $PHPFront->assign('#search_form.advanced', $data);
        
        // Not() selector
        $PHPFront->assign('#search_form:not(.advanced)', $data);

XPath Query

PHPFront allows you to run full xpath query to select elements. XPath queries are powerful popularly in their ability to traverse both up and down a document. In fact, CSS selectors are actually rewritten into XPath queries behind the scene in PHPFront.

      
      
        // Select all div elements
        $PHPFront->assign('xpath: div', $data);
        
        // Select all span children of all div elements
        $PHPFront->assign('xpath: div/span', $data);
        
        // Select all div elements with ID menu
        $PHPFront->assign('xpath: div[@id="menu"]', $data);
        
        // Select parents of all div elements
        $PHPFront->assign('xpath: div::parent', $data);

Switching Selector Types

PHPFront uses CSS as its default element selector. Under this setting all XPath queries must be prefixed with the Type Prefix: xpath:.

To switch to xpath as the default selector type, set the PHPFront::$default_element_selector_type property to xpath. Thus you can provide an xpath selector without any prefixes:

    
    
      $PHPFront->default_element_selector_type = 'xpath';
	  $PHPFront->assign('div::parent', $data);

And a css selector under this setting will then be what is prefixed like this:

    
    
	  $PHPFront->assign('css: #search_form:not(.advanced)', $data);

Feel free to set the default element selector type to whatever the convenience is for you.

Both CSS selectors and XPath query can be suffixed with the ::before and ::after CSS pseudo selectors to set data before or after an element's node.

Summary

PHPFront supports both CSS Selectors and XPath Query.
The default selector type can be changed with the PHPFront::$default_element_selector_type property. Recall

Back to Working with PHPFront