Develop Reference

How to select element with single class name in Jquery?

I have below html and want to get the element based on 'natural' class. The reason is I get t dynamic classes after 'natural'
<coral-checkbox class="natural coral-Form-field coral3-Checkbox" ></coral-checkbox>
I am trying below code to get hide the element but it is not working.
$("coral-checkbox[class='.natural']").hide();
But it is working when I select entire class like below but I need to do with only 'natural'. Is this possible ?
$("coral-checkbox[class='.natural coral-Form-field coral3-Checkbox']").hide();

Use .classname to select based on any of the element's classed. When you use an attribute selector, it matches the entire attribute (unless you use modifiers like *=, but they're not appropriate here, either).
$("coral-checkbox.natural").hide();

Use the class the selector instead of the attribute selector:
$("coral-checkbox.natural").hide();

How do I override a (css) metaclass property using a GreaseMonkey script?

My goal here is to make a script which will remove spoiler styling from /r/avatar.
By playing around with the "inspect element" element feature of Firefox I've managed to find the code in one of the CSS sheets which makes spoilered titles transparent. It looks like this
html:not([lang="ns"]) .thing.over18 a.title{
opacity:0.0
}
I've been searching for a way to override this attribute from greasemonkey, but I'm not sure how. I'm new to javascript: I've been trying to make use of
document.getElementsByClassName('.thing.over18')
to try and grab the elements with the (meta?)class attached to them, but no matter how I play with the class name I cant get it to select the right elements (I have an inkling that I'm not using the right function now).
There was actually a script on userscripts.org which did something similar (unspoiler /r/pokemon), but it seems that userscripts has been down so I cant look at its source.

There is no such thing as a "metaclass" in CSS or HTML. .thing is a class selector. .over18 is another class selector. You just have two class selectors.
getElementsByClassName only accepts a single class name.
document.getElementsByClassName('thing')
document.getElementsByClassName('over18')
If you want to use a selector, then use querySelector (for a single element) or querySelectorAll (for a NodeList).
document.querySelectorAll(".thing.over18");

Change css class atributes dynamically from Jquery?

I have a situation in my project , in css I have a class
which is empty for now
#version_mobile.hidden
{
}
and in js Im doing this
this.$("#version_mobile.hidden").css({right: - window.text_mobile_width});
(I supose my selector is bad ?)
how to add "right" atribute to this class with this dynamically created value ?
to class become
#version_mobile.hidden
{
right : -450px;
}
Btw I need to use this class because the animation is working with it :/

.css() function changes the inline css style but has no effect over the css classes at all.
As pointed out in the documentation:
When using .css() as a setter, jQuery modifies the element's style
property.
You can also change the classes by using the addClass(), removeClass() or even the toggleClass() functions of jQuery.

You cannot add to the class properties, but you can apply rules to the element style.

this.$("#version_mobile.hidden").css({"right", "- window.text_mobile_width"});
you can not add definations for class in jquery.
but you can add any style to your selecter.

What are you trying to achieve?
you cannot add a property to the css file using this.
what you should look at is you apply this id or class to your html elements
and access the elements in the javascript using the jquery selectors
$(#selector) and modify the property using .css.
So you will achieve the same result this way as any existing property style for that
element will be overridden with your latest style put through the jquery.

It's technically possible to modify style rules on the fly, but it's difficult.
In the document object you will find an (array) property called styleSheets, with one entry for each referenced stylesheet.
Each stylesheet object (of type CSSStyleSheet) has an insertRule method, which you can use to create new rules, or delete existing rules. What appears to be difficult is enumerating the existing set of rules so you can find which one to modify or delete.
That said, it's generally far preferred to simply change an element's classes than to try to dynamically change the styling of an existing class.
See also http://davidwalsh.name/add-rules-stylesheets

The right way to remove a class with jQuery

I have a simple question that interests me a lot:
If I want to remove a CSS class with jQuery, what's the right way?
1. removing after checking for the existence of the class?
if($(div).hasClass('css-class')) {
$(div).removeClass('css-class');
}
2. just removing it?
$(div).removeClass('css-class');
3.any other suggestions?

Just remove it. It's not like jQuery's going to throw an error (or anything like that) if the element does not have the class you're removing.
$(div).removeClass('css-class');

For removing class using jquery I prefer the 1st option for checking existence of class for a specific dom element and then remove the class applied for that DOM element eventhough jquery does not throw any error even if that DOM element has not been applied that class
E.g.
if($(div).hasClass('css-class')) {
$(div).removeClass('css-class');
}

jquery .focus not working for input:first

We are having an issue where when we open a modal window we are trying to set the focus to the first input element in the modal that is not of type hidden. here is what we are trying:
$("#test-overlay input[type!=hidden]:first").focus();
However, this call works:
$("#test-overlay #loginInput").focus();
The input field has an id of loginInput.
Any thoughts?

The problem is due to the order of precedence in which jQuery interprets the selector. Try the following:
$('#test-overlay input').not('[type=hidden]').first().focus();
This has the added benefit of not using the :first and attribute not equal to selectors since they're jQuery specific and queries using these cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method.