1

Context: I have three spans, A B C D (in that order). Based off of what is put in a form next to these spans, I turn the visibility off or on of these spans.

There's a line break in A and C that makes the display something like this :

A
B C
D

But if I hide C this ends up being :

A
B D

because the line break is not displayed.

What I'd like to do is add some other element (C') that would display if B is displayed and C isn't. So that , if C isn't there, I can still get the line break:

A
B (C')
D

I'm pretty sure this is possible by using a combination of class-based CSS switching and the :after pseudo-selector, but I'd rather like to avoid having to go in and modify the Javascript to change from the current display:show/none mechanisms. So my question ends up being :

Is it possible to 'inspect' currently set styles (such as 'display') in CSS rules ? I'd like to be able to do something similar to the attribute mechanism where I can do :

A[display='show']~B[display='none']:after { 
    content : '\a';
}

But just looking at the selectors I don't see how I could accomplish this without declaring new classes.

Improve this question
3
  • 1
    Can't you just put the break outside of the element? Therefore if display:none;, then it will still be there... idk, just trying to think outside of the box. Commented Sep 12, 2013 at 2:55
  • Why not use <div>'s and keep B and C spans but put them in a div too? Commented Sep 12, 2013 at 2:58
  • @JoshC that's a good suggestion, better than my suggestion unless there is some reason that a break isn't allowed "outside the box." Why don't you post that as an answer just in case? P.S. your use of words "outside the box" made me laugh because it is very good fit for putting the line break literally "outside the box." Commented Sep 12, 2013 at 3:00

3 Answers 3

Reset to default
2

Looking at every case that you want, there is always a line break before element D. So why not begin element D with a line break instead of ending C with a line break? Then you would have either

A
B C
D

or

A
B
D

and never

A
B D

Note: In writing my answer, I assumed there was some reason that it is not allowed to do the obvious thing and just separate C and D with a line break that wasn't contained in either of them. If you are allowed to do that, then I hope that Josh will post his suggestion as an answer and receive votes for it.

Update: If you want to make the A and C always be broken onto separate lines from the B/C combination, then you can use display: list-item which seems very appropriate for making a span behave like a one-line item:

http://jsfiddle.net/gDYs6/1/

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

There's also the case where there's just D, in which I don't want the line break at all. But maybe I can just deal with it, it is a much easier solution
2

I'm not sure if your layout will allow for it, but if you can float the elements to the left, you can use clear: left; on B and D, so that if C dissappears, D will still appear on a new line. Check the fiddle here and try removing C and run it again:

http://jsfiddle.net/gj6sn/

Edit: Forgot to mention, you will need to add a clearfix to the parent element, otherwise it will have 0 height. Updated jsfiddle and also read more here:

http://css-tricks.com/snippets/css/clear-fix/

Improve this answer

5 Comments

1+ I like this.. although, as you stated, it may not work in the layout.
clear: left on inline spans doesn't do anything without the additional float: left which will remove them from normal flow. It seems a little drastic. If you want to make the A and D spans display only on individual lines with CSS, then you could do this jsfiddle.net/gDYs6 .a, .d { display: list-item }
Well it doesn't remove them from the normal flow, it's fairly standard to float elements for positioning blocks these days. One thing I forgot to mention is he'll need to add a clearfix so the parent element will have a height
To make clear: if you add elements after the spans, they will still be pushed down below the spans.
@Rich I wasn't criticizing your answer by saying that floats take elements out of the flow, I was just pointing out a fact to be considered. Taking an element out of the flow is what floating does. w3.org/TR/CSS2/visuren.html "In the float model, a box is first laid out according to the normal flow, then taken out of the flow..."
0

The easy way is jquery - 

$("#dom_element").css("display")

will return you the current display style of whatever you reference. There's a way to do it in flat js but jquery is easy - what you want to do here is iterate through the A B C D matched class elements until you get to the one you want.

http://api.jquery.com/css/

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.