f



Target all DIV but not parents of one

In the following (edited) HTML, which is created by a 3rd party tool, I 
need to set display to none for all the DIV elements except the one 
which includes the class "mejs-playpause-button":

<div id="audio103>
   <div id="mep_2" class="mejs-container">
     <div class="mejs-inner">
       <div class="mejs-mediaelement">
         <audio src="media/audio001.mp3"></audio>
       </div>
       <div class="mejs-layers">
         <div class="mejs-poster"></div>
       </div>
       <div class="mejs-controls">
         <div class="mejs-playpause-button">
           <button"></button>
         </div>
         <div class="mejs-time-rail"></div>
         <div class="mejs-time"> </div>
         <div class="mejs-button">
           <button></button>
           <a href="#" class="mejs-volume-slider">
             <div class="mejs-volume-total"></div>
             <div class="mejs-volume-current"></div>
             <div class="mejs-volume-handle"></div>
           </a>
         </div>
       </div>
       <div class="mejs-clear"></div>
     </div>
   </div>
</div>

Every approach I've taken also sets a parent of "mejs-playpause-button" 
to none so "mejs-playpause-button" gets hidden as well eg.

#audio103 div[id^="mep_"] div:not(.mejs-playpause-button) {
	display: none;
}

How can I target every DIV but not "mejs-playpause-button" and its 
parents (ie not "mejs-container", "mejs-inner", or "mejs-controls")?

Andrew Poulos
0
Andrew
12/5/2016 9:30:06 AM
comp.authoring.stylesheets 8158 articles. 0 followers. mdmoura (161) is leader. Post Follow

3 Replies
123 Views

Similar Articles

[PageSpeed] 49

Andrew Poulos <ap_prog@hotmail.com> wrote on 05 Dec 2016 in 
comp.infosystems.www.authoring.stylesheets:

> In the following (edited) HTML, which is created by a 3rd party tool, I 
> need to set display to none for all the DIV elements except the one 
> which includes the class "mejs-playpause-button":
> 
> <div id="audio103>

If you start making mistakes like this, well ...


>    <div id="mep_2" class="mejs-container">
>      <div class="mejs-inner">
>        <div class="mejs-mediaelement">
>          <audio src="media/audio001.mp3"></audio>
>        </div>
>        <div class="mejs-layers">
>          <div class="mejs-poster"></div>
>        </div>
>        <div class="mejs-controls">
>          <div class="mejs-playpause-button">
>            <button"></button>
>          </div>
>          <div class="mejs-time-rail"></div>
>          <div class="mejs-time"> </div>
>          <div class="mejs-button">
>            <button></button>
>            <a href="#" class="mejs-volume-slider">
>              <div class="mejs-volume-total"></div>
>              <div class="mejs-volume-current"></div>
>              <div class="mejs-volume-handle"></div>
>            </a>
>          </div>
>        </div>
>        <div class="mejs-clear"></div>
>      </div>
>    </div>
> </div>
> 
> Every approach I've taken also sets a parent of "mejs-playpause-button" 
> to none so "mejs-playpause-button" gets hidden as well eg.
> 
>#audio103 div[id^="mep_"] div:not(.mejs-playpause-button) {
>      display: none;
>}
> 
> How can I target every DIV but not "mejs-playpause-button" and its 
> parents (ie not "mejs-container", "mejs-inner", or "mejs-controls")?

Try:

==========================
<div id="audio103">
	<div class="mejs-poster">xxxxxxxxxxxxxxx</div>
	<div class="mejs-playpause-button">
		<button>1323</button>
	</div>
</div>

<style type='text/css'>
#audio103 div {
	display: none;
}
#audio103 div.mejs-playpause-button {
	display: block;
}
</style>
==========================



-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
0
Evertjan
12/5/2016 10:11:46 AM
Andrew Poulos <ap_prog@hotmail.com> wrote:
> Every approach I've taken also sets a parent of "mejs-playpause-button" 
> to none so "mejs-playpause-button" gets hidden as well eg.
> 
> #audio103 div[id^="mep_"] div:not(.mejs-playpause-button) {
>        display: none;
> }
> 
> How can I target every DIV but not "mejs-playpause-button" and its 
> parents (ie not "mejs-container", "mejs-inner", or "mejs-controls")?
> 
> Andrew Poulos

It is impossible to use CSS to target an element based on whether it is a
parent of another element. So if you need to target the parents of
mejs-playpause-button then then you need to do it based
on other properties or use javascript.
0
luser
12/5/2016 11:10:47 AM
Andrew Poulos wrote:

> In the following (edited) HTML, which is created by a 3rd party tool, I
> need to set display to none for all the DIV elements except the one
> which includes the class "mejs-playpause-button":
> […]
> Every approach I've taken also sets a parent of "mejs-playpause-button"
> to none so "mejs-playpause-button" gets hidden as well eg.
> 
> #audio103 div[id^="mep_"] div:not(.mejs-playpause-button) {
> display: none;
> }
> 
> How can I target every DIV but not "mejs-playpause-button" and its
> parents (ie not "mejs-container", "mejs-inner", or "mejs-controls")?

The obvious, CSS-only, solution is to modify the rule above to exclude the 
elements with those classes as well.

For a more flexible approach you will have to use client-side scripting.
There is an XPath expression for “select elements that have at least one 
matching element as descendant”.  But if the XPath DOM is not supported (for 
HTML documents) in a target user agent, you should find all elements that 
have the target class, and from each one work your way up the document tree 
until you arrive at the search root (instead of the opposite, less efficient 
way).


PointedEars
-- 
When all you know is jQuery, every problem looks $(olvable).
0
Thomas
12/5/2016 9:07:33 PM
Reply: