I have an issue I am trying to select multiple CSS classes / ids.
The way my theme calls multiple buttons is it adds +1 to the button id like so:
edit-add-to-wishlist
edit-add-to-wishlist--1
edit-add-to-wishlist--2
edit-add-to-wishlist--3
etc
I wish to make said buttons all float to the right, without having to individually name and create each id in the CSS.
I have attempted to use the nth:child option as well as the * universal selector without much success.
Is selecting multiple a range (I guess you would call it) possible?
Something like this:
#edit-add-to-wishlist--* {
float: right;
}
You can use the attribute selector: [attr*=value]:
[id*=edit-add-to-wishlist] {
color: red;
}
jsFiddle here - it works
It selects all instances where a id contains edit-add-to-wishlist
[attr*=value]
Represents an element with an attribute name of attr and whose value contains at least one occurrence of string "value" as substring.
MDN documentation on the attribute selector
button[id^=edit-add-to-wishlist] {float:right}
Uses CSS3's substring matching by looking for <button id="edit-add-to-wishlist*> where the asterisk is a wildcard.
Related
So there is a page that I want to perform some action on with puppeteer. The problem is that there is a text area in which I want to type in something however the id of it is :
id="pin-draft-title-13a10e18-5a1e-49b9-893c-c5e028dc63e1"
As you might have guess for some reason only pin-draft-title remains the same but the whole number part changes for every refresh so puppeteer can't find it. I tried deleting the id and copying the selector itself the whoe #_Root div>div etc but that seems to be changing after sometime as well. So the main question is is there any way i can just select it using the pin-draft-title part and no matter what numbers follow it still selects it ?
You can use [id^=pin-draft-title-]
In case of javascript, if you want to select all the elements whos ID starts with a specified string or pattern, in your case "pin-draft-title", then consider using the following syntax.
document.querySelectorAll('[id^="pin-draft-title"]');
I do not really understand the difference between these three ways to declare an ID in html:
[id] = "'example'"
id = "example"
#example
The first two seem to be identical, is this correct?
These I can style in my example.component.css file.
The third one is special. I understand I can use it everywhere in the current html view, but I cannot apply CSS styles with example.component.css, is this correct?
Which one shall I use in angular? A combination of 1/2 and 3?
I also noticed if I use the same ID in different components, I will have duplicate ID's, which is really bad, so eventhough I use angular and different components I must be very careful how I name ID's, is this correct?
Version 2 is the default html syntax for an id
Version 1 is the angular way, if the id is a variable, e.g. [id]="myId"
Version 3 is the angular way to export/reference a html element to angular. This is not an id.
The id is a HTML Element (not angular), so you have to look that the id in html after building is unique.
Yes the first two have an identical end result. The second one is a string while the first one is a javascript expression and is evaluated by angular. This means you can use things like component properties such as [id]="'example-' . foo" which outputs id="example-2" if you had a property foo = 2; in your component.
The third one actually doesn't have anything to do with the ID attribute in HTML, but I understand why it may seem like it. It's actually a template reference variable and it allows you to access this element from anywhere else in your template, or even from your component code.
You're right, the html specification requires an ID to be unique, browsers are forgiving so they may permit you to use duplicate IDs but it should be avoided at all costs.
You can use id="unique_id" if you don't want to change it dynamically. If you want to change your HTML element id dynamically through Component.ts then you should use [id]="your_variable" & #example serves for different purpose described below.
id with [] brackets is angular directive to set HTML id attribute value through a variable or expression
id is a HTML attribute which sets a unique id on an element
#example if you are writing like this in Component.html you are basically creating a template reference variable which is a reference to a DOM element within a template. You can then access this using Angular #ViewChild decorator. It can also refer to a directive (which contains a component), an element, TemplateRef, or a web component.
Angular Template Reference Variable
[id] = "'example'" => This one set assign example as id and it is same as id = "example".
Suppose if we want to assign a variable value then use [id] = "example".For this in ts file you have to declare the example variable
Public example ="your-class-name";
So id value will be your-class-name
#example => These are templare refference variable.
A template reference variable is often a reference to a DOM element within a template.
For example,
<input #phone placeholder="phone number" />
<!-- lots of other elements -->
<!-- phone refers to the input element; pass its `value` to an event handler -->
<button (click)="callPhone(phone.value)">Call</button>
I have an ordinary table/th/tr/td block on a web page that displays tabular data. Data columns may be reordered:
product|price|date
price|product|date
date|product|price
... e.t.c
but the same order for a single render:
Microsoft|100|01-01-2020
Google|200|02-02-2019
or
100|Microsoft|01-01-2020
200|Google|02-02-2019
I have to stylize product/price/date columns in a table (for instance: "product" is bold, and "date" is italic). Finally, it looks ugly:
<td style="font-weight: bold">Microsoft</td> ...
When I render
table/th/tr/td
I know what data is in every column. May I use CSS to solve my task without applying styles/classes directly to every single cell?
Thank you in advance!
Sure you can! You can use td:nth-child(x) {} to apply all styles to that column
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
You can use the JS to decide weather to apply styles to which data cell.
Like:
You could have predefined set of css classes in array and then inject where required.
This is useful for dynamic data in s.
You can assign an specific class to your cell for example for name cells ->n , for date-> cells d and so on then with css you can style according to that class for example if you want to bold all names do like this:
.n{
font-weight:bold
}
Trying to select the Export button below which has an ID and name. I know I can getelementbyID but not sure how to then specify to further drill into the getattribute("name") because the getelementbyID wil only return 1 value, not an array
Thanks!
#Mturks83
getElementsByName("export")(0) the first part will give you the array of elements called export the (0) gives you the first.
It is faster to use querySelector than getElementsBy.
For example, just got direct with an attribute = value selector
ie.document.querySelector("[name=export]")
If more than one then add the parent td element id
ie.document.querySelector("#bottomButtonRow [name=export]")
Reading:
css selectors
I am trying to create an xpath with using (and) and (or) both expression together but not getting success.
I want to grab prices of products but some prices comes as .//p/span[#class='currency-value'] while other comes as .//p/span/span[#class='currency-value'] so I want to use OR exprssion for this
And I don't want price where product is for Advertise so I am using .//span[not(contains(text(),'Ad'))]
I have tried below xpath but its not working.
.//p/span[#class='currency-value'] | .//p/span/span[#class='currency-value'] and .//span[not(.='Ad')]
Rather than saying "try XXX" I think it's useful if you understand what's wrong with your current attempts.
.//p/span[#class='currency-value'] | .//p/span/span[#class='currency-value'] and .//span[not(.='Ad')]
The "|" operator in XPath means "union" - it forms the union of two node-sets. So //x | //y selects the union of the nodes selected by //x and those selected by //y. So far so good. You can simplify the "union" part of your expression to
(.//p/span | .//p/span/span)[#class='currency-value']
if you want.
The "and" is more problematic. The operands of "and" have to be booleans, whereas in your expression both operands are node-sets. I suspect (though I can't be sure) that your intent is to exclude from the union node-set those nodes that satisfy the predicate .='Ad' but without seeing your source data it's not clear how the products and prices relate to each other. Perhaps you intended this:
(.//p/span | .//p/span/span)[#class='currency-value'][not(.='Ad')]
or perhaps this:
(.//p/span | .//p/span/span)[#class='currency-value'][not(..='Ad')]
Either way, if I'm right that your intent is to exclude some of the nodes that would otherwise be selected, then an additional predicate is the way to do it.
After looking at the page, this CSS selector will work
div.hide-lg:not([data-behat-search-results-ads-xl]):not(.prolist-row) p > span.currency-value, div.hide-lg:not([data-behat-search-results-ads-xl]):not(.prolist-row) p > span > span.currency-value
Try this one. Do not overcomplicate with //p/span
//span[#class='currency-value'][not(.='Ad')]
Try this one. Combines #Vitaliy's answer with yours:
.//p/span[#class='currency-value'][not(.='Ad')] | .//p/span/span[#class='currency-value'][not(.='Ad')]
Please find the use of AND and OR in xpath as below:
this is the Page html:
<div class="mtlist-tab">
<ul class="wwf-tab-h">
<li class="tab-head">
<li class="tab-head on">
<li class="tab-head">
</ul>
</div>
if you are using AND in xpath where the two elements have same class class name then it will return 2 matching elements.
//li[#class='tab-head' and #class='tab-head']
if you are using AND in xpath where the two elements have different class class name then it will return 0 matching elements.
//li[#class='tab-head' and #class='tab-head on']
if you are using OR in xpath where the two elements have different class class name then it will return 3 matching elements(according to the HTML).
//li[#class='tab-head' OR #class='tab-head on']