We Keep Coding

Is it possible to create custom CSS pseudo-classes?

I am thinking of an alternative to JavaScript in case it's manually disabled by the user, so that instead of prompting them to enabled it, I could, for instance, in some way simulate the click event and change, for instance, the background colour by creating my own :click pseudo-class, just like it works for :hover.
Is such a scenario possible? Is it possible for one to create their own css pseudo-classes that?

If your question is, can I create a custom pseudo, example;
div:my-custom-pseudo { }
Then not without some JavaScript libraries.
Tutorial on using it with mooTools and slick
Personally, I haven't used this, so I don't know browser support and this is pretty much the only resource I ever found on custom pseudo classes.
Edit:
So pretty much, no, you can't do what you want, as you will always need JavaScript to do what you want.

Creating pseudo-classes is not possible and if you can simulate that also on some browser, then it would likely not work on others.
For that simple reason, all :first-child and :last-child polyfills/fallbacks were done by using class names rather than trying to make pseudo-class work.

You can use :active pseudo class. If I understand you properly.

Custom State Pseudo Classes may indeed be available in the future (for Custom Elements).

Marking an element with applied plugin

How would you mark an element to which a plugin has been applied? Suppose that I have this html:
Link
And in javascript, I would "apply a plugin"
$("#special-link").selectify();
Later I would like to know whether #special-link is already selectify-ied. I can think of these possibilities:
Add a class to the element. You can gather all elements with selectify simply by calling $(".selectified") and it is also easy to check whether an element has the plugin applied by calling $("elem").hasClass("selectified"). A drawback I can think of is that you're using CSS (=design) to store an info.
Set a data- value. It is a bit more difficult to find all elements with the selectify plugin applied, however it is "cleaner" solution in a way because you're not using CSS class to store an information
The plugin itself takes care of remembering the elements. This sounds like the best solution. However, you, as the creator of a plugin have to take care of keeping track of all the elements and putting them in a list. In case you have some sort "destroy" method, you would also have to remember to remove them from a list.
Which one do you think is the best solution? Can you think of any other advantages/disadvantages of the above mentioned methods?

jQuery plugins (the better ones) normally use classes only for styling additions and they store a code instance in the elements data (not data- attributes).
But, why not simply use an existing system for creating jQuery plugins, like the jQuery UI plugin Widget Factory
They do the heavy lifting for you :)

How to remove CSS attribute from a stylesheet using JQuery?

I am trying to figure out how to remove css attributes using Jquery. The issue is that it seems like this can only be done if a style is inline. For instance, when I use this approach:
('.hero').css('background-image', '').css('background-color', '');
It does nothing, although if it has those attributes set using the STYLE property, than it works great. The same can be said for:
('.hero').css('background-image', 'none').css('background-color', 'transparent');
Can anyone assist me in removing attributes that are added via stylesheet and not inline?

You can do this, but it is very convoluted. The only way to accomplish this is to load the stylesheet into a string in javascript, grep out the rules you want to remove (using String.replace() or similar), then remove the current css tag from the page (using $.remove()), and then adding a new css tag with the grepped contents of the file/text you loaded.
This is very very convoluted. I think you need to rethink why you are trying to do this to begin with. Or maybe just stick with setting the values back to their defaults using jQuery, which can be found on w3schools. Or maybe create a style in the stylesheet that sets the values to their defaults, and give the element that style. OR just give us a little more info, and we may be able to suggest a better way around your problem.

I think you may be asking the wrong question.
It looks like you want to be able to restyle an element without removing its existing class. A far easier way to do this is to ADD an additional class to the item you want differently styled, and then handle it in the CSS definition.
For instance:
('.hero').addClass("blank");
with CSS:
.hero.blank { background-color: transparent; }
As .hero.blank is more specific than .hero, it'll be the style applied first.

You have to set a default style for elements. Few default CSS properties from W3C. Most of default properties are listed here.

it looks like to me you're trying to adjust several css attributes in the same function.
if you want to clear the background image and make the background transparent then you just need to change both in the same .css function
try
$('.hero').css("background-image:none; background-color:transparent");
or just set up a 2nd css class that has the style preformatted "heroAlt" and use jQuery to remove old class/add new class
$('.hero').removeClass(function(){
$(this).addClass("heroAlt");
});
hope that helps

First of all, the following will work if used correctly:
$('.hero').css('background-image', 'none').css('background-color', 'transparent');
See: http://jsfiddle.net/Az7VZ/
That being said, there are a few pitfalls to watch out for.
You run your JavaScript before the HTML document containing the .hero div loads. This has the effect of jQuery selecting nothing to apply the CSS to.
Your CSS uses the "!important" modifier. You will not be able to overload that style with jQuery.
Also, don't forget the "$" or "jQuery" in your script.
Note: this DOES NOT override the actual .hero class. Therefore, if you add another element with the "hero" class, then it will have the original CSS styling. You would need to run the jQuery script again to apply the new style to the new element.
A great alternative to this, is creating different classes with the desired styles. Then removing/adding the CSS class via jQuery:
$('.hero').removeClass('hero').addClass('hero2');
See: http://jsfiddle.net/Az7VZ/1/

DOM CSS Cross Browser Library

I normally work with jQuery, which takes away most of the cross browser pain (although not, unfortunately, all). However, it doesn't seem to have any support for manipulation of the CSS DOM, and this still seems to be a bit of a minefield - QuirksMode has some information.
Our application allows users to theme their site to some extend by generating a CSS stylesheet with the colours that they have selected. It's pretty straightforward, but I'd like to let them "preview" it by applying the changes directly to the CSS DOM, before having them save it back to the database and generating the CSS file.
Does anyone know of a library which will make cross browser CSS DOM maniuplation easier? Just so we're clear, I'm not trying to change the css rules on an element, or set of elements (like with $.css()), or to add/remove classes. I would like to modify the stylesheets directly.

I highly recommend the YUI stylesheet utility. I haven't seen any other libraries with as much functionality or as clean an interface.

Couldn't you just add or replace a <style> element in the main document's DOM, and fill it with the generated CSS?

Best and easiest way, is to create a .jsp .php or whatever you're using which accepts colour parameters, which in turn renders a .css output with colours replaced.
Use JavaScript to make a request with colour parameters and append the css script to the page.
It is possible to do it directly on the styleSheet object, though this will take more time and create more maintenance. Everytime you want to change your custom stylesheet you actually use for production, you will also have to change the preview version. Ergo discrepancies will ensue.
Just reuse the stylesheet template you're going to use for production anyways.

Maybe you should try something like:
document.styleSheets[0].disabled = true;
This disabled the first stylesheet of the current page. Maybe if you play around with it you can resolve your problem.

style a form (select) using javascript, no framework?

anyone know how i can style a form element with javascript, but without a framework?
Found a nice plugin for jquery but I don't use jquery at all on my website so I want to avoid it if possible..
I want to create a select box that looks like this:
http://iforce.co.nz/i/qebncmoz.png
to clarify, i want to set an image/background on the select box so that I can have a custom dropdown arrow

You can style elements through the style attribute (replacing '-' with camel case) like this:
document.getElementById('elem').style.backgroundColor = 'red';
But it's better to put the styles in CSS and just change classes in JavaScript instead:
document.getElementById('elem').className = 'roundedCornerButton';

You have to use a different element. <select> can't be used because you can't style it very well using CSS, save for the background colour and font.
The best direction I can point you in is http://v2.easy-designs.net/articles/replaceSelect/ - it seems to explain how to do what you want to do pretty well.

You won't need Javascript for that, pure CSS will do.
Check this article for example:
Style Web Forms Using CSS

The styling is done through CSS, not JS. JQuery is used for shortcuts in Javascript.
There is no "replacement" happening - the tag is still there under the scene but good use of CSS is what makes it look like that image.

There is a number of drop down menu replacements out there that don't require a framework. Try Googling javascript drop down. See a fancy example here.
But consider using a framework. 20-50kb are not that much anymore in these times, it's not that much even for a dialup line. Frameworks provide a lot of little helpers for all sorts of tasks and you can link even to Google hosted versions, with the great likelihood that the user already has them cached.

If the form element has an ID associated, then you can use code similar to the following:
elem = document.getElementById(elemId);
elem.style.background = 'white';
I assume you want to dynamically change the element style; differently, you don't need JavaScript to obtain what you want.

It's not possible without javascript see here my question How to style a <select> dropdown with CSS only without JavaScript?
And if uyou don't want to use any framework then try this
http://v2.easy-designs.net/articles/replaceSelect/