Develop Reference

CSS selector for exact class name?

I am creating a data scraper and I need to collect a certain class in a nodelist:
let renewButtons = document.querySelectorAll('a._7s5_._3-95._4jy0._4jy3._517h._51sy._42ft')
These renewButtons are enabled and clickable buttons. My issue arises with the disabled buttons on the page. Their class names are:
_7s5_ _3-95 _4jy0 _4jy3 _517h _51sy _42ft _42fr
which is the same class as the enabled buttons except for the _42fr class added at the end. Everytime I querySelectorAll I get a nodelist of both enabled and disabled buttons. Is there a way to specify selecting only the enabled buttons? (selecting a class that matches exactly and only the specified classes)

You can try the use of pseudo selectors.
These are not actualy selectors, but consider them like "meta" selectors that each browser usually knows how to handle.
In your case you would use the :disabled selector.
Take a look here and here for more info on this, hope this helps!

You could use :enabled in your query selector like in an example below:
// will console only enabled `.btn` elements
console.log(document.querySelectorAll(".btn:enabled"))
<button class="btn">Enabled</button>
<button class="btn disabled" disabled>Disabled</button>

jQuery - How to know if selector should have a # or . or anything like that?

I am learning jQuery and a few of the problems in my class have been having me do selector practice.
This is probably hella basic, but how do I know if that specific HTML or CSS element I'm selecting requires it to be $('#element') or $('.element') instead of just $('element')?

jQuery (and the DOM functions document.querySelector and document.querySelectorAll) are using CSS selectors to select elements from the DOM.
So basically you look at (an) HTML element(s) and try to find something that identifies the element(s), for instance if you want one particular button:
<button id="login">Login</button>
You can use its id. IDs are by definition unique on the page, so you'll always get that button (or nothing if the ID is different or the button doesn't exist). The "id" selector is a # in front of the actual id, so you'd use #login here.
But what if you want to select multiple items that are similar? For instance:
<li class="menu-item">Home</li>
<li class="menu-item">Shop</li>
<li class="menu-button">Logout</li>
What if you want the all the menu-item elements, but not the menu-button?
This time you can use their class attribute. The class selector is prefixed with a ., so you'd use .menu-item to select those two elements.
There are many other elements and CSS has quite a bit of syntax. Here are a few examples:
You can select by the element's tagname: button selects all <button> elements
You can select by any attribute: button[disabled] selects all buttons with a disabled attribute like <button disabled>n/a</button>
You can select based on their parent: li img selects all the images that are directly embedded in a <li> element
I highly recommend reading the MDN article for more information.

How to select element in Protractor by html attribute when value contains

Struggling with how to select an element that doesn't have a standard unique id or class. How would I select this input element with Protractor?
Note: I cannot use the class ComboBoxInput_Default class, as this drop down box is used on several other page elements. There also isn't any easily identifiable parent element for at least 10+ DOM levels.
<div style="display:inline; white-space: nowrap;" id="ctl00_ctl31_g_b56afa08_7869_450c_8871_f6759a89d9b1_ctl00_WPQ3txtFields_ddPositioList_10_Solution_MultiComboSelection" class="ComboBox_Default">
<input type="text" style="width: 133px; height: 15px;" delimiter=";" class="ComboBoxInput_Default" value="-select-" name="ctl00$ctl31$g_b56afa08_7869_450c_8871_f6759a89d9b1$ctl00$WPQ3txtFields_ddPositioList_10_Solution_MultiComboSelection_Input" id="ctl00_ctl31_g_b56afa08_7869_450c_8871_f6759a89d9b1_ctl00_WPQ3txtFields_ddPositioList_10_Solution_MultiComboSelection_Input" autocomplete="off">
<div>
The only identifying markup that makes each of these inputs different is appended to the end of the generated id, Solution_MultiComboSelection_Input.
If I had to get this element with jquery, I would use the (not preferrable) contains $( "input[name*='Solution_MultiComboSelection_Input']" ). Is there some comparable way to locate elements in this way with Protractor?

Sure, use the "contains" or "ends-with" CSS selector:
element(by.css("input[id*=Solution_MultiComboSelection_Input]"));
element(by.css("input[id$=Solution_MultiComboSelection_Input]"));

If that is the only element with ComboBoxInput_Default as the class, then you could select it using
element(by.css('.ComboBoxInput_Default'))
This page has a lot of examples for selectors.

Hard to know for sure without seeing the rest of the page but I'd try...
$('input[value="-select-"].ComboBoxInput_Default);
or maybe
$('div.ComboBoxInput_Default input.ComboBoxInput_Default);
That said, the best solution is to have an identifier added to the code. Hope this helps!

HTML/JS good practices: Is it good to add too many ids?

I have an HTML page where I would like to add elements to a specific list, like so:
<div id="list-of-divs">
<div id="name-specific-id">
// content
</div>
<div id="another-id">
//content
</div>
.
.
.
<div id="yet-another-id">
</div>
Now I want to add new divs to that list, say with the following:
<div id="new-option-panel">
<input id="first-textbox-id" type="text">
<input id="second-textbox-id" type=text">
<button>Add new option</button>
Of course, the addition is done with jQuery code.
My question is: is it a good practice to add many such ids in HTML code and depend on them in my jQuery code, or is it a bad practice for both HTML and jQuery, and I should find other ways in my jQuery code (depending on DOM traversing, for example)?
Just for example of what I mean: will adding to many ids slow Javascript execution?

Id's are faster to query but very tedious to maintain, so I'd take the "performance hit" and make my code more obvious by using classes and id's only when necessary. In your example I would probably keep the id on the div but the input elements don't need one, a simple class will do for both jQuery and CSS or even no class at all.

Id selectors followed by Tag selectors are the best ones because they map directly to the native .getElementById() and .getElementByTag() methods
I would suggest that you always descend from the closest parent Id when you traverse the DOM. As in most languages there is always a readability/performance tradeoff that you will have to consider for your particular application.
Check out these performance guidelines for further insights
http://www.artzstudio.com/2009/04/jquery-performance-rules/

HTML Classes WITH IDs

I'm a little confused about HTML classes and IDs, as I'd like to use them BOTH to describe an HTML element. Is this valid and supported by most browsers?
The motivation for me to use both is this:
I have a CSS style that I would like applied to multiple elements.
I have some AJAX and Javascript that will manipulate those same elements, so I need a way to identify which element is which using an ID.
So I'd like to use an id to identify each element for JS manipulation AND at the same time I would like to specify a class so that the same style is applied from the same css.

An ID would be unique to only one item, where a class can be used to group many items together. You can use them together as you stated, ID as a unique identifier for Javascript and the class to markup with CSS.
Search for html class vs id to get many articles about this topic.
Example:
<ul>
<li class="odd" id="item1">First Item in the List</li>
<li class="even" id="item2">Second Item in the List</li>
<li class="odd" id="item3">Third Item in the List</li>
</ul>

Yes, it is perfectly valid to use both the ID and Class properties in one element. Example:
<div class="infoBox" id="myUniqueStyle"> *content* </div>
Still, keep in mind that an ID can only be used once (hence its name), while you can use classes as many times as you'd like througout a document. You can still use both the ID and the class to apply styles, while only the ID is a simple way of reaching the element through javascript.
A good way of doing it is applying IDs to all elements that you know are unique (header, navigation, main containers etc.), and classes to everything else.
"Is the" applies to elements using ID: "This is the navigation bar", "this is the header"
"Is a" or "is an" applies to elements using classes: "This is a blogPost", "this is an infoBox" etc.

You can definitely use both if you need to.
An ID is typically used to identify structural sections of your site - you should have only one element with a particular ID and any element can have only one ID.
A class is used to set styles which might be used in more than one place in your HTML file - any element can have multiple classes set.
A typical HTML document using both IDs and classes might be something like
<html>
...
<body>
<div id="header"></div>
<ul id="nav" class="full-width dark">...</ul>
<div id="content">
<div id="important-container" class="class-set-by-javascript another-class-set-by-javascript"></div>
</div>
</body>
</html>

Yes, any normal browser should allow the setting of CSS classes regardless of element id. However, setting styles on a specific element (using ids, for example) may override styles set through a CSS class.

Just a very obscure note about combining class and id in your CSS declarations, there's a bug with IE6, if you have:
two or more pages which have an
element with the same id
those elements have different
classes
you're styling them using an
#idname.classname rule
then only the first rule in the stylesheet will take effect.
See this page for details

Yes it is valid in all browsers. ID expresses just the unique IDentification of your html control through others, and class applies some style to it. Use IDs when there is only one occurence per page. Use classes when there are one or more occurences per page.