CODEWITHSUNDEEP
javascriptjquerycss
90intuition
90intuition

Reputation: 996

style html element followed by specific class

I try to style the following code element:

<code>
<span class="MathJax_Preview"></span>
...
</code>

With this style:

code {font: inherit; font-size: 100%; background: inherit; border: inherit;}

But I want to only style those code elements that are followed by this specific span class. I want to let all the other code elements untouched. Is it possible to do this by using css, javascript or jquery ?

Upvotes: 0

Views: 110

Answers (4)

mavrosxristoforos
mavrosxristoforos

Reputation: 3643

With CSS, it is impossible to access the parent element, based on a child element.

In Javascript, you can do this:

<script type="text/javascript">
  var spans = document.getElementsByClassName('MathJax_Preview');
  for(var i = 0; i < spans.length; i++) {
    if (spans[i].parentNode.tagName == "code") {
      spans[i].parentNode.setAttribute("style", "your style here");
    }
  }
</script>

Please note that jQuery is not necessary if you just need this.

Upvotes: 1

Hari
Hari

Reputation: 88

You can do it using Jquery

$('span.MathJax_Preview').parents('code').css({
    'font': 'inherit',
    'font-size' : '100%', 
    'background': 'inherit', 
    'border': 'inherit'
});

OR you can do it by using CSS and Jquery

In css you can give this style

.myStyle{
    font: inherit; 
    font-size: 100%; 
    background: inherit; 
    border: inherit;
}

In jquery, you can assign this class to your HTML element

$('span.MathJax_Preview').parents('code').addClass('myStyle');

Upvotes: 1

David Thomas
David Thomas

Reputation: 253308

If you must style the code based on the existence of a child of that class:

.hasMathJaxPreview {
    font: inherit;
    font-size: 100%;
    background: inherit;
    border: inherit;
}

$('span.MathJax_Preview').parent('code').addClass('hasMathJaxPreview');

Though, if it were possible, it'd be much simpler to style the child with plain CSS-selector.

References:

Upvotes: 1

Praveen
Praveen

Reputation: 56501

You can do it in CSS like this

code span.MathJax_Preview {
font: inherit;
font-size: 100%;
background: inherit;
border: inherit;
}

Upvotes: 0

Related Questions