CODEWITHSUNDEEP
htmlcssselector
John R Perry
John R Perry

Reputation: 4192

Is there a way to add a class/id to a selector?

Let's say I have some HTML that looks like this:

<div id="non-adjustable">
    <a id="adjustable-a" href="example.html">
        <div id="adjustable-div">Button</div>
    </a>
</div>

Then I have a stylesheet with some fantastic animations that I want to add to the #non-adjustable div.

Limitations/Requirements:

  1. I cannot edit the HTML of the #non-adjustable div so I cannot add a class to that div.
  2. I can edit the HTML under the #non-adjustable div (#adjustable-a and #adjustable-div).
  3. I can edit the CSS but I cannot take the styling from the animation stylesheet (I can only use the classes inside the stylesheet).

Basically, if this was a thing, I'd want to be able to do this:

 <style type="text/css">
      #non-adjustable(.fantastic-animation) {
           /*Other Declarations*/
      }
 </style>

But that either doesn't work, or I did it incorrectly. Does anyone have any other ideas?

Upvotes: 2

Views: 53

Answers (1)

damianmr
damianmr

Reputation: 2531

You could use the :before and :after pseudo elements and style them to fit your needs.

http://www.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/

This is what most font libraries do... They create pseudo elements in the stylesheet and set the background image, the alignment, etc.

Upvotes: 1

Related Questions