Jump to content

Apply CSS to all siblings NOT having a "class" attribute?


pstein
 Share

Recommended Posts

Assume I have a (simplified) HTML code like:

<div id="myid">  <div id="mysubid" class="aaa">  ...  </div>  <div id="mysubid" class="bbb">  ...  </div>  <div id="mysubid">  ...     <div id="mysubsubid">....</div>  </div></div>

Now I want to apply a CSS to all siblings with the id "mysubid" but which have NOT a class attribute (here=the last one).if this is not possible: Maybe I can asisgn a CSS to all subelements which have an id=mysubid but NOT have an embedded <div with id=mysubsubid">Thank youPeter

Link to comment
Share on other sites

You can't use multiple identical id attributes (well you can you proved that, but its invalid and not how its supposed to be used :-)), they should be unique within a page.

IF you used unique ids such as

       <div id="myid">            <div id="mysubid0" class="mysubid aaa">                <p>                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.                </p>            </div>            <div  id="mysubid1" class="mysubid bbb">                <p>                    Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris.                </p>            </div>            <div id="mysubid2">                <p>                    Fusce convallis, mauris imperdiet gravida bibendum, nisl turpis suscipit mauris, sed placerat ipsum urna sed risus. In convallis tellus a mauris.                </p>                <div class="mysubsubid">    <p>                        Proin nonummy, lacus eget pulvinar lacinia, pede felis dignissim leo, vitae tristique magna lacus sit amet eros. Nullam ornare.                     </p></div>            </div>        </div>

THEN you could use

[id^="mysubid"][class] {background-color: red;}

It checks if id attribute value starts with 'mysubid' THEN if it has a class.

 

IF you don't want to go unique id route, the quick easy way without looking into it deeply it to use the fact that multiple class names are separated by a space, we can use this for example.

        <div id="myid">            <div class="mysubid aaa">                <p>                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.                </p>            </div>            <div  class="mysubid bbb">                <p>                    Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris.                </p>            </div>            <div class="mysubid">                <p>                    Fusce convallis, mauris imperdiet gravida bibendum, nisl turpis suscipit mauris, sed placerat ipsum urna sed risus. In convallis tellus a mauris.                </p>                <div class="mysubsubid">    <p>                        Proin nonummy, lacus eget pulvinar lacinia, pede felis dignissim leo, vitae tristique magna lacus sit amet eros. Nullam ornare.                    </p></div>            </div>        </div>

To basically use same selector method for id to check for space after specific class value starting with 'mysubid' as in 'mysubid ',

 [class^="mysubid "] {background-color: red;}

The only thing to watch out for is if class="mysubid " is used, as it is perfectly valid and acceptable.

Edited by dsonesuk
Link to comment
Share on other sites

if you use duplicate ids, then sooner or later it will fail because script, the parser, or the rendering engine cannot resolve it. The problem could range from a bunch of frustration because that looks like it should work refuses to co-operate or worst case the rendering engine gets an uncaught exception because the Document Object has been turned to mush so it hangs (Chrome, Safari, Opera) or terminates (Firefox and IE).

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...