3

During my research for this, I stumble upon this thread, but since it is 2 years old, Im wondering if there's a recent way of targeting an element that is right before another.

For example:

<span> Element Before Div </span>
<div id="thediv"> Target Span From Here Using #thediv </div>

Is there any CSS that can accomplish this?
I'm aware of the usage of jQuery, I rather not use it if this is possible with plain CSS.

Thank you in advance.

EDIT: Example to clarify usage.

  <ul>
     <li>
        <span>SubTitle Span</span>
        <div class="subdiv">Some content after SubTitle</div>
     </li>
     <li>
        <span>Item Description</span>
        <div>Item Content</div>
     </li>
     <li>
        <span>Item Description</span>
        <div>Item Content</div>
     </li>
     <li>
        <span>SubTitle Span</span>
        <div class="subdiv">Some content after SubTitle</div>
     </li>
     <li>
        <span>Item Description</span>
        <div>Item Content</div>
     </li>
     <li>
        <span>Item Description</span>
        <div>Item Content</div>
     </li>
     <li>
        <span>SubTitle Span</span>
        <div class="subdiv">Some content after SubTitle</div>
     </li>
     <li>
        <span>Item Description</span>
        <div>Item Content</div>
     </li>
  </ul>
Community
  • 1
  • 1
Hélio C
  • 143
  • 9
  • Is this a real question ? Can you show us through a fiddle or codepen , why you would need this. There might be other _semantic_ ways to accomplish this. – G-Cyrillus Apr 12 '14 at 18:32
  • It is a 'real question' for this reason. If i have a - ul - with 4 items, in the 3rd li I have a span that goes before a element with a class, lets say...
    Content
    content the only way to target that SPECIFIC span (assuming i have spans in all li items) is either give it a class or call it by: ul li nth-child(#position) span. When if the span was after, as stated in the answer below I just have to call it with a + or simply target it directly by #thediv span.     – Hélio C Apr 12 '14 at 21:05
  • fine, but do you have a clear html structure to show what you mean and how why this would happen, naturally i would target the li. I just do not understand your situation. there is a parent selector maybe coming on CSS level 4 ! – G-Cyrillus Apr 12 '14 at 22:35
  • My curiosity on this came up when I was building a
      that had the previous described situation and there was 3 specific
    • items that would act like sub-titles for a specific group. (Like groups in select boxes) And since I had a div right after the span that had a common class all across the 3 if there as a way t target a span that came right before that specific div would save me some time. I could simply say - .divclass (target previous) span - and I would have all my span in that position with the same style. I'll edit the question with this example.
     – Hélio C Apr 13 '14 at 04:51

2 Answers2

1

No this is not possible using CSS alone

if your HTML had been structured like below then yes CSS can be used 

<div id="thediv"> Target Span From Here Using #thediv </div>
<span> Element Before Div </span>

for e.g to change the color of the span using the div, you would write as 

#thediv + span {
color:blue;
}

this is called adjacent sibling selector.

There is no way in CSS to target a previous element ,but a following element can be targeted like shown above.

Prabhu Murthy
  • 9,031
  • 5
  • 29
  • 36
  • This is stated in the post I referred. This I knew, what I was looking was a certain on the "Not Possible". Thank you. – Hélio C Apr 12 '14 at 21:07
  • @HélioC: This actually is going to change once CSS4 comes around, but that's still a ways off. – Chuck Apr 13 '14 at 05:18
  • @Chuck: No, [it won't](http://dev.w3.org/csswg/selectors4/#profiles), unless browsers decide to implement the 'Complete,' rather than 'Fast,' selector profiles. – David Thomas Apr 13 '14 at 13:01
0

There is indeed actually, no way to select that span.

Level 4 propose this : 

    !span li > div.subdiv {/* would style span if 
                              inside li that has a  
                              div.subdiv  
                              as direct child */}

so we could do as well: !span li > div.subdiv:hover {}.

http://www.w3.org/TR/2013/WD-selectors4-20130502/#subject (maybe i missunderstands subtilities of english) <edit> actually i missed this : http://dev.w3.org/csswg/selectors4/#profiles </edit>

Today,(Apr. 14) there is no way to directly style that span via CSS ,

but CSS can offer some turn around to hide it or change background color for instance.

like this silly test :) http://codepen.io/anon/pen/kxwtB/ over the div and believe that span receive some CSS styling.

Actually i was curious too of what kind of rules you wanted to see modified for the span .

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • 1
    I'm curious: have you actually read the spec/draft for Selectors Level 4? Because the spec explicitly states that the subject-indicator isn't available in the 'Fast profile' (as used in browsers), ref: [Fast vs Complete Selector profiles](http://dev.w3.org/csswg/selectors4/#profiles). – David Thomas Apr 13 '14 at 12:50
  • thanks to point this to me, it makes sens. spec are a pain to read, and english is not my mother language, i pick it up working long ago as a chef in US Md., so i 'm missing lots of it :) – G-Cyrillus Apr 13 '14 at 13:07