5

Is there anyway to add a selector to an inline style? I am attempting to create some CSS only interaction, but I cannot use either an external CSS file or define CSS styles in the document. So I must put it all into a style attribute.

I have found this:

CSS 

:checked + div {display: block !important;}

HTML

<div class="span3"><label for="an1">press me</label></div>
<input id="an1" type=checkbox style="display:none;"><div style="display: none;"> hidden</div>

This results in the hidden text being shown when "press me" is clicked.

Is there anyway to put the CSS code into the inline style attribute? I am dealing with system that severely limits my allowed code.

user3373860
  • 51
  • 1
  • 1
  • 2
  • 1
    and how you want it to perform like? – Richa Mar 03 '14 at 07:27
  • You know you can put a ` – Denys Séguret Mar 03 '14 at 08:02
  • possible duplicate of [How to write a:hover in inline CSS?](http://stackoverflow.com/questions/1033156/how-to-write-ahover-in-inline-css) – towc Mar 03 '14 at 08:07
  • possible duplicate of [CSS Pseudo-classes with inline styles](http://stackoverflow.com/questions/5293280/css-pseudo-classes-with-inline-styles) – Patsy Issa Mar 03 '14 at 08:39

2 Answers2

1

If you have to, can you just toss it in there above your block? I'd really like to know what kind of system you're working with that limits you to not being able to edit the stylesheet...

<style type="text/css">#an1:checked + div {display: block !important;}</style>
<div class="span3">
    <label for="an1">press me</label>
</div>
<input id="an1" type=checkbox style="display:none;">
<div style="display: none;">hidden</div>

Oh and for the record :checked is a pseudo-selector and can only be executed from within a stylesheet so what you're asking is impossible.

Edit: There's is a way you could do this.. again not favorable but it does the trick.

<div class="span3">
    <label for="an1" onclick="document.getElementById('an1').style.cssText = 'display: block;'">press me</label>
</div>
<input id="an1" type=checkbox style="display:none;">
<div style="display: none;">hidden</div>

jsFiddle Example

d3c0y
  • 946
  • 7
  • 13
  • I am in a wicked paranoic realization of SPIP and inline CSS are the only tool I have access to. After countless searches and trials, this solutions works for me. Thank you! – Yulia Kuznetsova Nov 23 '20 at 15:39
-1

Yes you can add selector in inline style.

here is example code

<a href="http://www.google.org/"
      style="{color: #900}
      :link {color: #00f}
      :visited {color: #F00}
      :hover {outline: 1px solid #333333}
      :active {background: #00f}">...</a>

another example

<p style="{color: #090; background-color:#FF00AA; line-height: 1.2}
      ::first-letter {color: #900}">...</p>

Here is Documentation

but main disadvatage is not support all browser.

Community
  • 1
  • 1
Jaykumar Patel
  • 26,836
  • 12
  • 74
  • 76