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>
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.
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 .
Related
Looking at this simple code why the textarea is pushed 10/15 pixel down?
<ul>
<li>
<div>
<textarea></textarea>
</div>
</li>
</ul>
How can I fix this via css? I wish to have the textarea inline with the list.
div is a block element
So either you use display:inline-block ( or inline, depending on what you want ) on the div
div {
display:inline-block
}
<ul>
<li>
<div>
<textarea></textarea>
</div>
</li>
</ul>
Either you use float:left . But i suggest you don't do that. Using float left will get the element out of the normal flow
Elements after a floating element will flow around it. To avoid this, use the clear property or the clearfix hack.
Using float:lett
Try this, it works fine :
<ul>
<li>
<div style = 'float:left' >
<textarea></textarea>
</div>
</li>
</ul>
HTML:
<ul>
<li>
<div class="text-div">
<textarea></textarea>
</div>
</li>
</ul>
CSS:
.text-div{
float: left;
}
Hope that helps.
it's because you have used list-style. remove it through css
ul{
list-style:none;
}
assuming i have a structure like this (and can't modify it):
<ul>
<li class="common"> <p>First A</p> </li>
<li class="common"> <p>Second A</p> </li>
<li class="common"> <p>Third A</p> </li>
<li class="common"> <p><b>SELECT ME</b></p> </li>
<li> <p>First B</p> </li>
<li> <p>Second B</p> </li>
<li> <p>...</p> </li>
</ul>
Is there a way to select the last element with class "common"? (in this case the fourth element)
First i tried selecting a subset with:
.common{
background: red;
}
and it worked correctly. So i tried selecting last-child of them, with:
.common:last-child{
background: green;
}
but not luck. i also would like to avoid adding a class for that element.
Jsfiddle
EDIT: i simplified classes and selectors to make it cleaner
Is there a way to select the last element with class "common"?
No, not with a CSS selector without modifying the HTML.
what about
.common:last-of-type {
background: green;
}
You can use JavaScript or jQuery
$('custom').prev().css('color', 'red');
If your not against a JS route you could do this
$('li.common.custom').first().prev('.common').css('background','yellow');
It finds the first element that has both .common and .custom classes and then goes to the previous element. So its technically the last element that only has .common
https://jsfiddle.net/89z20341/
Is the structure going to stay exactly as you have coded it? eg with the bold tags on the element you want to select?
if so could you just do this
.common p b{
background: green;
display:block;
}
http://jsfiddle.net/seLm589s/4/
I have a simple horizontal menu. On some of the menu headings, i would like to split them so the text starts on a new line.
HTML:
<ul class="tabs">
<li>
<div class="home">
Home
</div>
</li>
<li>
<div class="contact">
How to
Contact Us
</div>
</li>
<li>
<div class="products">
About Our
Products
</div>
</li>
</ul>
CSS:
.tabs ul {
list-style: none;
}
.tabs li {
display: inline-block;
}
So, what i am trying to do is, rather than appear as About Our Products.. Instead:
About Our
Products
Here's my fiddle: http://jsfiddle.net/oampz/dWbx5/
Ideally without using br
So like I said in the comment, you can maybe use max-width
HERE is a fiddle using it.
EDIT: I added it to the inline CSS, but you can move it into your CSS page.
Simply use a break <br />?
<div class="products">
About Our<br />Products
</div>
I also prefer to use a float: left; on the li instead of inline-block, it's easier (and more logic) to work with:
http://jsfiddle.net/2EDbr/
<div >
About Our
</div>
<div>
Products
</div>
similarly u can use for all
http://jsfiddle.net/dWbx5/4/
I'm trying to make these wo sections at the same line where the <ul> section at right and the <span> section, but, I can't find how.
PS: I use here bootstrap.
<ul class="pagination pagination-sm">
<li class="disabled">«</li>
<li class="active">1 <span class="sr-only">(current)</span></li>
<li>2 </li>
<li>3 </li>
<li>4 </li>
<li>5 </li>
<li>»</li>
</ul>
<span>
<span class="glyphicon glyphicon-plus"></span><span style="margin-left:10px;margin-right:6px;">Nouveau</span> |
<span style="margin-left:5px;"><span class="glyphicon glyphicon-arrow-up"></span><span style="margin-left:10px;"></span></span>|
<span style="margin-left: 5px;"><span class="glyphicon glyphicon-arrow-down"></span><span style="margin-left:10px;"></span></span>
</span>
Any suggestion, please ?
Thanks a lot !
Something like this would work:
EXAMPLE HERE
.pagination.pagination-sm + span {
vertical-align:top;
display:inline-block;
margin:25px 0 25px 10px;
}
Make the adjacent span element inline-block, align it to the top and add margins to match the .pagination element. This assumes that the markup will remain the same.
Try adding divisions around the two parts, and floating the two divisions next to each other. Here's a jsfiddle. See the CSS to see how to float.
<div class="cont-1">
... pagination code ...
</div>
<div class="cont-2">
... span and anchor codes ...
</div>
At the end of the code, make sure to clear your floats.
<div class="clear"></div>
Having a brain freeze...
I want to do this :
<li>
<a>
<p>text</p>
<p class="x">text</p>
</a>
</li>
I know I can't. So how do I ? (No JS/jQuery etc)
Change <p> to some inline element (e.g. <span>) and give li a span a style of display: block;, I guess.
<li>
<a>
<span>text</span>
<span class="x">text</span>
</a>
</li>
You could do that in HTML(5). But support in some browsers (Firefox) is flakey. See: http://html5doctor.com/block-level-links-in-html-5/
The best way is to use naturally inline elements such as <span>s instead of block level elements inside the anchor.
This validates as XHTML 1.1:
<li>
<p>text</p>
<p class="x">text</p>
</li>
I'm assuming what you're getting at is you want the entire block of text in the list item, and maybe the entire list item, to be clickable?
First, a paragraph tag is a block level item, but an anchor tag is inherently an inline element. You can't place that inside an anchor tag, it's not semantically correct and it won't validate. Do something like this instead:
<ul class="myList">
<li>
<a href="#">
<strong>This is the title</strong>
<span>This is the link text</span>
</a>
</li>
</ul>
Assuming you want the entire area of the list item to be clickable, you can apply display:block; to the anchor tag using css. Note that if you've assigned a different height to the list item and want everything to be clickable, you'll need to set the height on the tag as well.
.myList a { display:block; }
And if you want the strong tag to break a line (your "main text" in the link)...
.myList a strong { display:block;}
Hope that helps!