# Component Selector
UIExtension provides a css-selector like syntax to make easier to search components.
It's usually used to configure the target property of fragments and component search.
# Syntax
| selector name | example | description |
|---|---|---|
| name selector | 'componentName', 'component_name','component-name', 'component-name1', '1component' | component name selectors can only include single-letter, number, underscore or minus character |
| type selector | '@div','@dropdown-menu', '@print:print-dialog' | component type means the tag name defined in layout template, a type selector should start with @ character and single-letter, number, underscore or minus. some time including the component module name sparated with colon character. |
| star selector | '*' | Selects all components |
| children selector | 'selector1>selector2' | Selects all components which match selector2 where the parent is selector1 |
| descendants | 'selector1 selector2' | Selects all selector2 components inside selector1 |
| attribute selector | [attr=value] | Selects all components with property or attribute name of attr whose value equals to value |
| attribute selector | [attr^=value] | Selects all components with property or attribute name of attr whose value begins with value |
| attribute selector | [attr$=value] | Selects all components with property or attribute name of attr whose value ends with value |
| attribute selector | [attr*=value] | Selects all components with property or attribute name of attr whose value contains with value |
| attribute selector | [attr!=value] | Selects all components with property or attribute name of attr whose value not equals to value |
| method selector | selector1::childAt(index) | Selects all components that are all the child at index of their parents selected by selector1 |
| method selector | selector1::parent() | Selects all components that are all the parent component of their children selected by selector1 |
| method selector | selector1::allAfter() | Selects all components of the same level that after the component set selected by selector1 |
| method selector | selector1::allBefore() | Selects all components of the same level that before the component set selected by selector1 |
| index-related selector | selector1::eq(index) | Selects the component by index value in components set selected by selector1 |
| index-related selector | selector1::last() | Selects the last one component of the components set selected by selector1 |
| index-related selector | selector1::first() | Selects the first one component of the components set selected by selector1, It's equivalent to selector1:eq(0) |
# Examples
← UI fragments I18N →