css adjacent Sibling combinators - complected selecting

Question

In the below code How do i go about selecting the "title" class but IF the "subnav" class exists?

<ul class="flexMenu-popup">
<li>

    <a href="x" class="title">
    </a>

    <ul class="subnav">
    </ul>

</li>
</ul>

Your question was not clear, can you please elaborate more specific — kernal_lora, Aug 28 '16 at 06:00
I have updated the question and added class names to understand better, sorry for confusing and thanks for reply. — Nippledisaster, Aug 28 '16 at 06:10
No. CSS has a selector for "an element which is after another element" but not "al element which is before another element". Don't ask me why. One possible solution is to change the order around in the source and to do something smart with flexboxes or positioning. — Mr Lister, Aug 28 '16 at 06:10
I do know there is no css selector for that :D But i think doing some complex css targeting we can accomplish this, what do you think? — Nippledisaster, Aug 28 '16 at 06:14
Are you asking how to select title class element even parent ul element has subnav class? — kernal_lora, Aug 28 '16 at 06:16
@ȚamanŞheƦzad check out my solution below? hope it answers your problem? — kukkuz, Aug 28 '16 at 06:22
can't be done in pure css. you can't select a parent based on a child. agree that your title is not really clear. javascript/jquery et al can select a parent based on a child — chiliNUT, Aug 28 '16 at 06:23

kukkuz · Answer 1 · 2016-08-28T06:21:41.980

Using adjacent selectors (~ and +) it is only possible to select siblings that follow an element. That means you can select a that follows a ul and not vice-versa.

See snippet below:

ul {
  border: 1px solid black;
  list-style-type: none;
}
.flexMenu-popup li > ul ~ a {
  color: red;
}

<ul class="flexMenu-popup">
  <li>
    <a href="#">a tag</a>
    <ul>
      ul tag
      <li>
        <a href="#">a tag</a>
        <ul>ul tag</ul>
        <a href="#">a tag</a>
      </li>
    </ul>
    <a href="#">a tag</a>
  </li>
</ul>

Solution: But I think what you are looking for can be done by the combination of the below rules:

.flexMenu-popup li > a {
  color: red;
}
.flexMenu-popup li > ul ~ a {
  color: inherit;
}

See snippet below:

ul {
  border: 1px solid black;
  list-style-type: none;
}
.flexMenu-popup li > a {
  color: red;
}
.flexMenu-popup li > ul ~ a {
  color: inherit;
}

<ul class="flexMenu-popup">
  <li>
    <a href="#">a tag</a>
    <ul>
      ul tag
      <li>
        <a href="#">a tag</a>
        <ul>ul tag</ul>
        <a href="#">a tag</a>
      </li>
    </ul>
    <a href="#">a tag</a>
  </li>
</ul>

Thanks, but i do not actually use color property, i will use position/right/left/ and content css property which i dont think this is a solution for what i want ;( . i think i have to go for simple script to do that. — Nippledisaster, Aug 28 '16 at 06:30
yes, using `:before` psuedo element is a good option. Cheers! — kukkuz, Aug 28 '16 at 06:32

score 1 · Accepted Answer · answered Aug 28 '16 at 06:25

1

I'm not sure this is possible with CSS, but it's quite simple with jQuery:

var $ul = $('a.title', $('ul.flexMenu-popup > li > ul.subnav').parent());

if ($ul.length) {
    alert('yes');
}
else {
    alert('no');
}

answered Aug 28 '16 at 06:25

MJH

2,301
7
18
20

Thanks mate :) this solution was good – Nippledisaster Aug 28 '16 at 06:57
Sorry im a total newbie, i try to target the elements without any class names but it does not work – Nippledisaster Aug 28 '16 at 07:16
The second argument to the main jQuery call represents the element inside which the element represented by the first argument is being sought. So, your "var" line should look like this: `var $ul = $('a', $('.flexMenu-popup > li ul').parent());` The way you had it, your selector was looking for `.flexMenu-popup > li ul` _inside of another_ `.flexMenu-popup > li ul`, which does not exist. – MJH Aug 28 '16 at 07:34

css adjacent Sibling combinators - complected selecting

2 Answers2