selecting span - css selectors - Ruby - ruby
I am trying to select and click on this <span>
<span class="el-icon 28-0"></span>
in the below hierarchy but unable to do so.
<div class="list-wrap ng-scope" ng-repeat="d in cols">
<div class="list-element selected" ng-click="a.cb(d.name, member.name)" ng-class="{selected: (selectValue === d.name || selectValue === member.name + ' ' + d.name)}">
<span class="el-icon 28-0"></span>
<!-- ngIf: !d.displayName --><span ng-if="!d.displayName" class="el-text ng-binding ng-scope">
28.0
</span><!-- end ngIf: !d.displayName -->
<!-- ngIf: d.displayName -->
</div>
</div>
<div class="list-wrap ng-scope" ng-repeat="d in cols">
<div class="list-element" ng-click="a.cb(d.name, member.name)" ng-class="{selected: (selectValue === d.name || selectValue === member.name + ' ' + d.name)}">
<span class="el-icon 27-0"></span>
<!-- ngIf: !d.displayName --><span ng-if="!d.displayName" class="el-text ng-binding ng-scope">
27.0
</span><!-- end ngIf: !d.displayName -->
<!-- ngIf: d.displayName -->
</div>
</div>
This is the page , I am referencing
https://docs.saucelabs.com/reference/platforms-configurator/?_ga=1.5883444.608313.1428365147#/
In "Browser" section, I am trying to select FF 28.0
I've tried
#driver.find_element(:css,"span.el-icon.28-0")
BUt it gives
The given selector span.el-icon.28-0 is either invalid or does not result in a WebElement.
Tried this too
#driver.find_element(:css,"span.el-text.ng-binding.ng-scope").click
which gives
Element is not currently visible and so may not be interacted with
Valid CSS classes cannot start with a number.
If changing the class name is not an option for you, try changing the selector to span.el-icon[class*="28-0"]
Note: The 'contains' selector [class*=...] matches any elements whose given attribute contains the given value. In this case, any element with a class attribute containing '28-0' would be matched. You could also do this with things like alt, src or href to match external images or links. Read more here.
Related
KnockoutJS elements not rendered once loaded via Jquery Ajax function
I have loaded a sidebar over ajax however this html uses knockoutJS to render completely. I am wondering how to execute the KnockoutJs portions of this code. The content below is loaded via jQuery ajax function and contains a number of knockout elements as well as some X Magento Init type scripts: <div class=\"block filter\" id=\"layered-filter-block\" data-mage-init='{\"collapsible\":{\"openedState\": \"active\", \"collapsible\": true, \"active\": false, \"collateral\": { \"openedState\": \"filter-active\", \"element\": \"body\" } }}'> <div class=\"block-title filter-title\" data-count=\"0\"> <strong data-role=\"title\">Shop By<\/strong> <\/div> <div class=\"block-content filter-content\"> <strong role=\"heading\" aria-level=\"2\" class=\"block-subtitle filter-subtitle\">Shopping Options<\/strong> <div class=\"filter-options\" id=\"narrow-by-list\" data-role=\"content\" data-mage-init='{\"accordion\":{\"openedState\": \"active\", \"collapsible\": true, \"active\": [0,1,2], \"multipleCollapsible\": true}}'> <div data-role=\"collapsible\" class=\"filter-options-item\"> <div data-role=\"title\" class=\"filter-options-title\">Category<\/div> <div data-role=\"content\" class=\"filter-options-content\">\n<ol class=\"items\"> <li class=\"item\"> <a href=\"http:\/\/www.domain.com\/catalogsearch\/result\/index\/?ajax=1&cat=143&q=ice+machine\">Front of House <span class=\"count\">2<span class=\"filter-count-label\">items<\/span><\/span><\/a> <\/li> <li class=\"item\"> <a href=\"http:\/\/www.domain.com\/catalogsearch\/result\/index\/?ajax=1&cat=182&q=ice+machine\">Bar Supplies <span class=\"count\">4<span class=\"filter-count-label\">items<\/span><\/span><\/a> <\/li> <li class=\"item\"> <a href=\"http:\/\/www.domain.com\/catalogsearch\/result\/index\/?ajax=1&cat=257&q=ice+machine\">Catering Equipment<span class=\"count\">111<span class=\"filter-count-label\">\n items <\/span><\/span>\n <\/a>\n <\/li>\n <li class=\"item\">\n <a href=\"http:\/\/www.domain.com\/catalogsearch\/result\/index\/?ajax=1&cat=342&q=ice+machine\">\n Warewashing <span class=\"count\">\n 3 <span class=\"filter-count-label\">\n items <\/span><\/span>\n <\/a>\n <\/li>\n <li class=\"item\">\n <a href=\"http:\/\/www.domain.com\/catalogsearch\/result\/index\/?ajax=1&cat=521&q=ice+machine\">\n Catering Equipment Offers <span class=\"count\">\n 1 <span class=\"filter-count-label\">\n item <\/span><\/span>\n <\/a>\n <\/li>\ <\/ol> <\/div>\n <\/div>\n <div data-role=\"collapsible\" class=\"filter-options-item\"> <div data-role=\"title\" class=\"filter-options-title\">Brand<\/div>\n <div data-role=\"content\" class=\"filter-options-content\"> <div data-bind=\"scope: 'brandFilter'\"> <!-- ko template: getTemplate() --> <!-- \/ko --> <\/div> <script type=\"text\/x-magento-init\"> {\"*\" : {\"Magento_Ui\/js\/core\/app\": {\"components\": {\"brandFilter\": {\"component\":\"Smile_ElasticsuiteCatalog\\\/js\\\/attribute-filter\",\"maxSize\":10,\"displayProductCount\":true,\"hasMoreItems\":true,\"ajaxLoadUrl\":\"http:\\\/\\\/www.domain.com\\\/catalog\\\/navigation_filter\\\/ajax\\\/?ajax=1&filterName=brand&q=ice+machine\",\"items\":[{\"label\":\"Scotsman\",\"count\":41,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&brand=Scotsman&q=ice+machine\",\"is_selected\":false},{\"label\":\"Hoshizaki\",\"count\":15,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&brand=Hoshizaki&q=ice+machine\",\"is_selected\":false},{\"label\":\"Ice-o-matic\",\"count\":12,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&brand=Ice-o-matic&q=ice+machine\",\"is_selected\":false},{\"label\":\"Blue Ice\",\"count\":7,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&brand=Blue+Ice&q=ice+machine\",\"is_selected\":false},{\"label\":\"Graupel\",\"count\":7,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&brand=Graupel&q=ice+machine\",\"is_selected\":false},{\"label\":\"Nemox\",\"count\":7,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&brand=Nemox&q=ice+machine\",\"is_selected\":false},{\"label\":\"Manitowoc\",\"count\":6,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&brand=Manitowoc&q=ice+machine\",\"is_selected\":false},{\"label\":\"Polar Refrigeration\",\"count\":5,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&brand=Polar+Refrigeration&q=ice+machine\",\"is_selected\":false},{\"label\":\"Longo & Co\",\"count\":4,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&brand=Longo+%26+Co&q=ice+machine\",\"is_selected\":false},{\"label\":\"Beaumont\",\"count\":3,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&brand=Beaumont&q=ice+machine\",\"is_selected\":false}]}}}}}\n<\/script>\n\n<\/div>\n <\/div>\n <div data-role=\"collapsible\" class=\"filter-options-item\">\n <div data-role=\"title\" class=\"filter-options-title\">Power<\/div>\n <div data-role=\"content\" class=\"filter-options-content\"><div data-bind=\"scope: 'power_ddFilter'\">\n <!-- ko template: getTemplate() --> <!-- \/ko -->\n<\/div>\n\n<script type=\"text\/x-magento-init\">\n {\"*\" : {\"Magento_Ui\/js\/core\/app\": {\"components\": {\"power_ddFilter\": {\"component\":\"Smile_ElasticsuiteCatalog\\\/js\\\/attribute-filter\",\"maxSize\":10,\"displayProductCount\":true,\"hasMoreItems\":false,\"ajaxLoadUrl\":\"http:\\\/\\\/www.domain.com\\\/catalog\\\/navigation_filter\\\/ajax\\\/?ajax=1&filterName=power_dd&q=ice+machine\",\"items\":[{\"label\":\"13 Amp (Plug)\",\"count\":111,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&power_dd=13+Amp+%28Plug%29&q=ice+machine\",\"is_selected\":false},{\"label\":\"1 Phase (Hard Wired)\",\"count\":2,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&power_dd=1+Phase+%28Hard+Wired%29&q=ice+machine\",\"is_selected\":false}]}}}}}\n<\/script>\n\n<\/div>\n <\/div>\n <div data-role=\"collapsible\" class=\"filter-options-item\">\n <div data-role=\"title\" class=\"filter-options-title\">Price<\/div>\n <div data-role=\"content\" class=\"filter-options-content\"><div class=\"smile-es-range-slider\" data-role=\"range-price-slider-price\">\n <div data-role=\"from-label\"><\/div>\n <div data-role=\"to-label\"><\/div>\n <div data-role=\"slider-bar\"><\/div>\n <div class=\"actions-toolbar\">\n <div data-role=\"message-box\"><\/div>\n <div class=\"actions-primary\">\n <a class=\"action primary small\" data-role=\"apply-range\">\n <span>OK<\/span>\n <\/a>\n <\/div>\n <\/div>\n<\/div>\n\n<script type=\"text\/x-magento-init\">\n { \"[data-role=range-price-slider-price]\" : { \"rangeSlider\" : {\"minValue\":1,\"maxValue\":6091,\"currentValue\":{\"from\":1,\"to\":6091},\"fieldFormat\":{\"pattern\":\"\\u00a3%s\",\"precision\":2,\"requiredPrecision\":2,\"decimalSymbol\":\".\",\"groupSymbol\":\",\",\"groupLength\":3,\"integerRequired\":false},\"intervals\":[{\"value\":1,\"count\":1},{\"value\":2,\"count\":1},{\"value\":3,\"count\":1},{\"value\":40,\"count\":1},{\"value\":60,\"count\":1},{\"value\":64,\"count\":1},{\"value\":150,\"count\":1},{\"value\":179,\"count\":1},{\"value\":190,\"count\":1},{\"value\":242,\"count\":1},{\"value\":291,\"count\":1},{\"value\":325,\"count\":1},{\"value\":355,\"count\":2},{\"value\":395,\"count\":1},{\"value\":465,\"count\":1},{\"value\":472,\"count\":1},{\"value\":515,\"count\":1},{\"value\":520,\"count\":1},{\"value\":535,\"count\":1},{\"value\":555,\"count\":1},{\"value\":577,\"count\":1},{\"value\":585,\"count\":1},{\"value\":599,\"count\":1},{\"value\":605,\"count\":2},{\"value\":615,\"count\":1},{\"value\":640,\"count\":1},{\"value\":658,\"count\":1},{\"value\":685,\"count\":1},{\"value\":705,\"count\":1},{\"value\":730,\"count\":1},{\"value\":745,\"count\":2},{\"value\":785,\"count\":1},{\"value\":805,\"count\":1},{\"value\":830,\"count\":1},{\"value\":895,\"count\":2},{\"value\":925,\"count\":1},{\"value\":965,\"count\":1},{\"value\":970,\"count\":1},{\"value\":990,\"count\":2},{\"value\":1030,\"count\":1},{\"value\":1065,\"count\":1},{\"value\":1080,\"count\":1},{\"value\":1085,\"count\":1},{\"value\":1095,\"count\":1},{\"value\":1105,\"count\":1},{\"value\":1130,\"count\":1},{\"value\":1155,\"count\":1},{\"value\":1225,\"count\":1},{\"value\":1235,\"count\":1},{\"value\":1240,\"count\":1},{\"value\":1259,\"count\":1},{\"value\":1310,\"count\":1},{\"value\":1360,\"count\":1},{\"value\":1365,\"count\":1},{\"value\":1450,\"count\":1},{\"value\":1485,\"count\":1},{\"value\":1495,\"count\":1},{\"value\":1510,\"count\":1},{\"value\":1580,\"count\":2},{\"value\":1605,\"count\":2},{\"value\":1685,\"count\":1},{\"value\":1710,\"count\":1},{\"value\":1779,\"count\":1},{\"value\":1785,\"count\":1},{\"value\":1865,\"count\":1},{\"value\":1870,\"count\":1},{\"value\":1885,\"count\":1},{\"value\":1890,\"count\":1},{\"value\":1970,\"count\":1},{\"value\":1995,\"count\":1},{\"value\":2000,\"count\":1},{\"value\":2050,\"count\":1},{\"value\":2130,\"count\":1},{\"value\":2199,\"count\":1},{\"value\":2220,\"count\":1},{\"value\":2345,\"count\":1},{\"value\":2350,\"count\":1},{\"value\":2360,\"count\":1},{\"value\":2405,\"count\":1},{\"value\":2415,\"count\":1},{\"value\":2445,\"count\":1},{\"value\":2450,\"count\":2},{\"value\":2480,\"count\":1},{\"value\":2500,\"count\":1},{\"value\":2530,\"count\":1},{\"value\":2565,\"count\":1},{\"value\":2570,\"count\":1},{\"value\":2595,\"count\":1},{\"value\":2695,\"count\":1},{\"value\":2730,\"count\":1},{\"value\":2825,\"count\":1},{\"value\":2850,\"count\":1},{\"value\":2950,\"count\":1},{\"value\":2995,\"count\":1},{\"value\":3010,\"count\":1},{\"value\":3025,\"count\":1},{\"value\":3145,\"count\":1},{\"value\":3205,\"count\":1},{\"value\":3295,\"count\":1},{\"value\":3300,\"count\":1},{\"value\":3485,\"count\":1},{\"value\":3495,\"count\":1},{\"value\":3580,\"count\":1},{\"value\":4015,\"count\":1},{\"value\":4075,\"count\":1},{\"value\":4305,\"count\":1},{\"value\":4310,\"count\":1},{\"value\":4595,\"count\":1},{\"value\":4620,\"count\":1},{\"value\":5250,\"count\":1},{\"value\":5355,\"count\":1},{\"value\":6090,\"count\":1}],\"urlTemplate\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&price=<%- from %>-<%- to %>&q=ice+machine\",\"messageTemplates\":{\"displayCount\":\"<%- count %> products\",\"displayEmpty\":\"No products in the selected range.\"},\"rate\":1} } } <\/script> <\/div> <\/div> <\/div> <\/div> <\/div> These are then added to a block on my page via html jQuery method: $(sidebarBlock).html(this.filters); Looking at the DOM I cannot actually see the scripts however they are there in response when reviewing with console.log(). Similarly the below shows the scripts are present: $(sidebar).find("script").each(function() { console.log("found a script"); } I have tried to use .trigger('contentUpdated'); like below: document.getElementById("layered-filter-block").innerHTML = this.filters; $(sidebarBlock).trigger('contentUpdated'); and: $(sidebarBlock).html(this.filters); $(sidebarBlock).trigger('contentUpdated'); and by reapplying bindings for knockout: ko.cleanNode($('#layered-filter-block')); ko.applyBindings($('#layered-filter-block')); The above throws an error about bindings already being applied however but I have used cleanNode before to unbind however error persists.
This fixed issue for me: $(sidebarBlock).applyBindings(); https://codeblog.experius.nl/magento-2-uicomponent-reinit-ajax-reload/
Thymeleaf/Spring: How to check if a message property exists
Is it possible to check if a message property exists? Example: I would like to remove a collapsable div-Element in a loop containing only a message property. <div th:each="payment : ${paymentList}"> <input type="radio" data-toggle="radio-collapse" data-target="#collapse1" [...] /> [...] <div id="collapse1" th:utext="#{|payment.${payment.id}.additionalInfo|}" [...]> Hello, world! </div> </div> If there is no additional info for the payment the element is not necessary. Lets say we have the IDs DIRECT_DEBIT, PAYPAL and SAFERPAY and the following message properties: payment.DIRECT_DEBIT=Direct debit payment.DIRECT_DEBIT.additionalInfo=Direct debit info text... payment.PAYPAL=PayPal payment.PAYPAL.additionalInfo=PayPal info text... payment.SAFERPAY=Saferpay As you can see there is no additionInfo message property for SAFERPAY.
You should use the #messages object to check if a message exists. For example: th:if="${#messages.msgOrNull('payment.' + payment.id + '.additionalInfo') != null}" <div id="collapse1" th:if="${#messages.msgOrNull('payment.' + payment.id + '.additionalInfo') != null}" th:utext="#{|payment.${payment.id}.additionalInfo|}" [...]> Hello, world! </div>
You can use th:if to add the element only if it isn't null and isn't equal to a empty string (I don't know how you implemented the object). <div id="collapse1" th:if="${payment.${payment.id}.additionalInfo != null && payment.${payment.id}.additionalInfo != ''}" th:utext="#{|payment.${payment.id}.additionalInfo|}" [...] > Hello, world! </div> ... and you should also change the id property. In your impelementation there could be more than one element with id "collapse1". If you also don't want to show the input field use a th:block element and place the th:if attribute there: <div th:each="payment : ${paymentList}"> <th:block th:if="${ ... && ... }" > <input ...> <div ...> </div> </th:block> </div>
Thymeleaf switch block returns incorrect value
I have a switch block in my thymeleaf page where I show an image depending on the reputation score of the user: <h1> <span th:text="#{user.reputation} + ${reputation}">Reputation</span> </h1> <div th:if="${reputation lt 0}"> <img th:src="#{/css/img/troll.png}"/> </div> <div th:if="${reputation} == 0"> <img th:src="#{/css/img/smeagol.jpg}"/> </div> <div th:if="${reputation gt 0} and ${reputation le 5}"> <img th:src="#{/css/img/samwise.png}"/> </div> <div th:if="${reputation gt 5} and ${reputation le 15}"> <img th:src="#{/css/img/frodo.png}"/> </div> <div th:if="${reputation gt 15}"> <img th:src="#{/css/img/gandalf.jpg}"/> </div> This statement always returns smeagol (so reputation 0), eventhough the reputation of this user is 7: example EDIT: I was wrong, the image showing was a rogue line: <!--<img th:src="#{/css/img/smeagol.jpg}"/>--> but I commented it out. Now there is no image showing. EDIT2: changed my comparators (see original post) and now I get the following error: The value of attribute "th:case" associated with an element type "div" must not contain the '<' character. EDIT3: Works now, updated original post to working code
According to the documentation, Thymeleaf's switch statement works just like Java's - and the example suggests the same. In other words: you cannot do <th:block th:switch="${reputation}"> <div th:case="${reputation} < 0"> [...] but would need to do <th:block th:switch="${reputation}"> <div th:case="0"> [...] which is not what you want. Instead, you will have to use th:if, i.e. something like this: <div th:if="${reputation} < 0"> <img th:src="#{/css/img/troll.png}"/> </div>
Change <div th:case="0"> <img th:src="#{/css/img/smeagol.jpg}"/> </div> to <div th:case="${reputation == 0}"> <img th:src="#{/css/img/smeagol.jpg}"/> </div>
listElement property not behaving as expected
Hi have created a JSFiddle of my problem here. http://jsfiddle.net/L7o1nct6/2/ I will also repeat the code here as Stackoverflow is forcing me to do. JavaScript <!-- using fine uploader 5.1.3 at http://keysymmetrics.com/jsfiddle/jquery.fine-uploader.js --> $(document).ready(function() { $("#fine-uploader").fineUploader({ listElement: $('#listElement'), debug: true, template: 'qq-template-bootstrap', request: { endpoint: "/my-endpoint" } }); }); HTML <script type="text/template" id="qq-template-bootstrap" class="qq-uploader-selector"> <div class="row"> <div class="col-sm-4" > <div class="qq-upload-button-selector qq-upload-drop-area-selector drag-drop-area" > <div>Drag and drop files here or click to upload</div> </div> </div> </div> <div class="qq-upload-list-selector" id="#listElement" > <div class="panel panel-default" > <div class="panel-body" > <div class="qq-progress-bar-container-selector progress"> <div class="qq-progress-bar-selector progress-bar"></div> </div> <span class="qq-upload-spinner-selector qq-upload-spinner"></span> <span class="qq-upload-file-selector qq-upload-file"></span> <span class="qq-upload-size-selector qq-upload-size"></span> <span class="qq-upload-status-text-selector qq-upload-status-text"></span> <img class="qq-thumbnail-selector" qq-max-size="100" /> </div><!-- close panel-body --> </div><!-- close panel --> </div> </script> <h1>Fine Uploader Test</h1> <div id="fine-uploader"></div> When viewing the JSFiddle example, if you open the debug console, you will see the message "Uncaught Error: Could not find the file list container in the template!". I am unsure what this means, I thought I could use the listElement property to tell fine-uploader which element to use for this list? On a side note, if I cut and paste the div with id=listElement and move it adjacent to the div with class=qq-upload-button-selector then this example works fine. Any help would be appreciated, I have spent hours on this and haven't found an answer for this on stackoverflow either.
A couple issues with your code: "#listelement" is not a valid html element ID in all browsers. You are attempting to select an element that does not yet exist in the DOM. It's not clear why you are specifying a list element anyway. Fine uploader should find the list in the template when it renders.
nokogiri + mechanize css selector by text
I am new to nokogiri and so far most familiar with CSS selectors, I am trying to parse information from a table, below is a sample of the table and the code I'm using, I'm stuck on the appropriate if statement, as it seems to return the whole contents of the table. Table: <div class="holder"> <div class ="row"> <div class="c1"> <!-- Content I Don't need --> </div> <div class="c2"> <span class="data"> <!-- Content I Don't Need --> <span class="data"> </div> </div> ... <div class="row"> <div class="c1"> SPECIFIC TEXT </div> <div class="c2"> <span class="data"> What I want </span> </div> </div> </div> My Script: (if SPECIFIC TEXT is found in the table it returns every "div.c2 span.data" variable - so I've either screwed up my knowledge of do loops or if statements) data = [] page.agent.get(url) page.search('div.row').each do |row_data| if (row_data.search('div.c1:contains("/SPECIFIC TEXT/")').text.strip temp = row_data.search('div.c2 span.data').text.strip data << temp end end
There's no need to stop and insert ruby logic when you can extract what you need in a single CSS selector. data = page.search('div.row > div.c1:contains("SPECIFIC TEXT") + div.c2 span.data') This will include only those that match the selector (e.g. follow the SPECIFIC TEXT). Here's where your logic may have gone wrong: This code if (row_data.search('div.c1:contains("SPECIFIC TEXT")'... temp = row_data.search('div.c2 span.data')... first searches the row for the specific text, then if it matches, returns ALL rows matching the second query, which has the same starting point. The key is the + in the CSS selector above which will return elements immediately following (e.g. the next sibling element). I'm making an assumption, of course, that the next element is always what you want.
I'd do require 'nokogiri' html = <<_ <div class="holder"> <div class ="row"> <div class="c1"> <!-- Content I Don't need --> </div> <div class="c2"> <span class="data"> <!-- Content I Don't Need --> <span class="data"> </div> </div> <div class="row"> <div class="c1"> SPECIFIC TEXT </div> <div class="c2"> <span class="data"> What I want </span> </div> </div> </div> _ doc = Nokogiri::HTML(html) css_string = 'div.row > div.c1[text()*="SPECIFIC TEXT"] + div.c2 span.data' doc.at(css_string).text.strip # => "What I want" How those selectors would work here - [name*="value"] - Selects elements that have the specified attribute with a value containing the a given substring. Child Selector (“parent > child”) - Selects all direct child elements specified by "child" of elements specified by "parent". Next Adjacent Selector (“prev + next”) - Selects all next elements matching "next" that are immediately preceded by a sibling "prev". Class Selector (“.class”) - Selects all elements with the given class. Descendant Selector (“ancestor descendant”) - Selects all elements that are descendants of a given ancestor.