I have this:
<div class="block3">
<div class="surround">
<div class="s_title">
<h3>Title</h3>
</div>
<div class="block_content">
<div class="content"> </div>
</div>
</div>
</div>
In my example I can't add content directly in HTML (blocks rendered by default in PHP), so I need to add in CSS.
The hard part of this is that I need to add text only in block3 element, after <h3> (.s_title:after will affect all s_title, so it will not work for me.)
Is there any way to do this?
Just add .block3 in front of your selector like how you would limit selection of any other element to some container element:
.block3 .s_title:after
Related
Is there a way to tell Tailwind: If a parent has a certain class then show a certain HTML element, if not hide it? Or can this not be done in Tailwind?
<body>
<div class="hidden">Hello</div>
</body>
<body class="show">
<div class="block">Hello</div>
</body>
Yes!
You can use and arbitrary value on the parent, if you conditionally add the class it will show the children like so:
Demo: https://play.tailwindcss.com/0pCtnVrAh7
<!-- hidden -->
<div class="">
<div class="hidden item">Hey!</div>
</div>
<!-- Show if class "[&_.item]:flex" is added-->
<div class="[&_.item]:flex">
<div class="hidden item">Hey!</div>
</div>
<!-- Coming soon -->
<div class="group should-show">
<div class="hidden group-[&.should-show]:block">Hey!</div>
</div>
In a future update, hopefully tailwind will allow us to use the group modifier to style based on if the group has an additional class.
No. Tailwind is a css framework. To use conditional statements, you can either use Tailwind with javascript or php or any other languages.
Actually, there is.This is a css solution, but it can be achieved in tailwind as well:
.hidden {
display:none
}
.parent .hidden {
display:block
}
<div class="hidden">Text that doesn't show up</div>
<div class="parent">
<div class="hidden">
Text is visible
</div>
</div>
html
I have this html code:
<div class="form-group well">
<p>...</p>
<hr>
<div class="select-skill">
...
</div>
<div class="select-skill">
...
</div>
<div class="select-skill">
...
</div>
<div class="select-skill">
...
</div>
</div>
And i want to set a style using css3 to second child that has select-skill class, but i cant use .select-skill:nth-child(2), It doesn't work.
I know the solution is to remove <p>...</p><h1> or move select-skill to a new parent.
Is there any solution to select this element without adding any code of html?
JSFiddle
You can use this:
.select-skill:nth-of-type(2){
background:red;
}
Or if there are more in different div's, you can do:
.form-group .select-skill:nth-of-type(2){
/*styles*/
}
instead.
I have something like this:
<div id="someID">
<div class="text">
-----other html tags
</div>
<div class="text">
-----other html tags
</div>
<div class="text">
-----other html tags
</div>
</div>
And some CSS for the text div. It is possible to set different CSS for the second div with the class of text?
You can easily do with with nth-child:
#someID .text:nth-child(2) {
background:red;
}
Demo: http://jsfiddle.net/P6FKf/
You can use the pseudo selector nth-child i.e div.text:nth-child(2)
My header text looks like:
My Hea....
I want it to read
My HeaderHereTodayAndIsTooLong
What do I have to change in the jquery mobile framework/css to make this render correctly?
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h2>My HeaderHereTodayAndIsTooLong</h2>
Home
</div>
Wrap your h2 tags in a div, if you want the text to appear in the centre still then add a text-align style to the container div just made:
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<div style="text-align:center;">
<h2>My HeaderHereTodayAndIsTooLong</h2>
</div>
</div>
EDIT: To have your button appear on the right, remove the text-alignment and just apply some styles to your header to position it how desired, rough example:
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<div>
<h2 style="font-size:0.8em;margin-left:10px;width:70%;">My Header Here Today And Is Too Long</h2>
</div>
Home
</div>
You can try just overriding the margin styles that JQM adds to the hx, of course that will only buy you a bit more space, eventually if your header text is to long it will still overflow (you can of course override those styles to).
for example
.lrMarg0
{
margin-left:0px !important;
margin-right:0px !important;
}
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h2 class="lrMarg0">My HeaderHereTodayAndIsTooLong</h2>
Next
</div>
For some reason div elements change their parents during rendering in unexpected way, reproducible in Firefox and Chrome.
E.g.
<div class="main">
<div class="slot"/>
<div class="slot"/>
</div>
<div class="footer"></div>
Firefox debugger will show as this at runtime as:
<div class="main">
<div class="slot"><div class="slot"/></div></div>
<div class="footer"></div>
</div>
When I remove .slot elements(see the code attached), everything renders as expected(#footer place in tree after rendering is same as in the source).
Code:
http://pastebin.com/3j3aQFdh
The problem is that you use empty divs: like that
<div />
You should try to change your code to use valid divs with empty content:
<div></div>