11.1. Selector and Attribute Setting¶
Selector and attribute settings are used to retrieve information from the target page’s
source code. In other words, with these settings, you tell the plugin what to retrieve from the
target web page.
These settings are basically composed of at least two inputs which are
attribute, although some just have only
selector input. Additionally, a
Visual Inspector button and a button are available which are
used to find CSS selectors visually and to test whether the entered CSS selectors and attributes
can retrieve the information you want or not, respectively. A few settings of this type are shown
in Fig. 11.1 through Fig. 11.7.
In this input, you should enter one or more CSS selectors. The CSS selector(s) will be used to locate one or more HTML elements available in the target web page’s source code.
If you want to enter more than one CSS selector, just put a
,between the CSS selectors, such as
The plugin’s Visual Inspector tool is used to find CSS selectors just by clicking to elements in the target web page. However, you might need more complex CSS selectors to exactly match the elements you want. CSS selectors is a very broad topic and easy to learn. You can check out some written   and video  tutorials on the Internet to learn more about them and how to use them.
- Attribute (optional)
In this input, you should enter an attribute name of the HTML element(s) that the CSS selector, which is entered into
For example, let’s consider the following
<img src="source.jpg" title="An image" alt="The image element's alternative text">
imgelement has 3 attributes which are
alt. These are the attributes you can enter into this input if the CSS selector entered into
selectorinput matches this
imgelement. There are many other HTML elements and attributes. You can just observe the HTML element, check out its attributes, and enter that into this input.
You do not have to enter an attribute name into this input. This is optional. If you want to get the information stored in an attribute, you can enter that attribute’s name in this input to get that information.
The plugin also adds two more attributes. The first one is
text. When you write
textinto this input, the text of the element is retrieved. The other one is
html. When you write
html, the outer HTML code of the element is retrieved.
The following video demonstrates an example usage of this type of a setting. The test results show what the plugin will retrieve from the target site using your configuration.