How can I access CSS selectors programmatically? [closed]


Tags: javascript,css

Problem :

I'm working from an example I found on the web to create supposed HTML5 tooltips in CSS3.

.tooltip {
    border-bottom: 1px dotted #333;
    position: relative; cursor: pointer;
}  

.tooltip:hover:after {
    content: attr(title);
    position: absolute;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.85);
    padding: 3px 7px;
    color: #FFF;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    margin-left: 7px;
    margin-top: -3px;
}

How can I create this programmatically as the application purposely contains no HTML or CSS?

From what I can tell so far, I think the 'after' is a CSS selector but I cannot find out any more information as to how I can create, access or modify this in the DOM using JavaScript.

JavaScript solutions only please, thank you.



Solution :

You can add any CSS rule in the document using insertRule. On MDNs page, there's a method which shows a cross-browser compatible method to insert arbitrary CSS rules.

Since your app does not contain any HTML, you have to create a <style> object yourself using document.createElement. document.styleSheets[0].cssRules will be null when the style sheet is from a different origin.


    CSS Howto..

    How to test for existence of CSS class in JavaScript without jQuery?

    jquery how to make an element comeback to initial position after animation

    How to Centralize a Float on the Screen (such horizontally as vertically) Using CSS

    How to show sorting order if column width is smaller than caption in free jqgrid

    How to add custom CSS for displaying on mobile screens in WordPress?

    how to add a custom font to rails app

    How can I restrict the number of characters entered into an HTML Input with CSS (or jQuery, if necessary)?

    How to associate CSS classes? For example, the “apple” class is also from the “fruit” class?

    How to link assets which are inside of module in Laravel?

    How to center two columns using CSS?

    CSS how to vertical align div in a div against a sibling div (inline-block)

    How to recursively remove CSS classes

    How to fixed the form fields alignment issues using css and bootstrap

    How to build those rectangular with picture and text css bootsrap? [closed]

    How to apply CSS to anchor with active class only (parent only) and not include children?

    How to enlarge footer on mobile only?

    How to handle text overflow. Is there a Firefox equivalent to the text-overflow style from IE and Safari?

    Show bigger image on thumbnail's hover

    How to manage clashing third party CSS

    How to add custom css in Cognos?

    How to hide content that is not wrapped by tag using only CSS?

    How to increase the font size of one word only in the line?

    How to select the first element of n>4 elements with CSS only?

    Unicode down triangle doesn't show up in IE9

    How to center variable length submit buttons?

    How to set size of a checkbox in table vaadin

    How to add space after a colon in CSS with Sublime Text 2?

    how to use css sprites? [closed]

    How to make my right-box float right…?

    CSS: how can I make this table fit the border when resized?