what I want is that div with id makeMeWork to be visible only when div with id clickMe is clicked.
the fiddle link.
html:
<div class="showhim">Press ME<div class="showme">Working</div></div>
<div class="showme" id='makeMeWork'>Not Working</div> <div class="showhim" id='clickMe'>Press ME</div>
css:
.showme{
display: none;
background-color:red;
width:200px;
height:50px;
}
.showhim:active .showme{
display : block;
background-color:green;
}
I want this done purely through css as js and HTML part can no longer be modified.
I guess the major problem now is, there is no way to select previous child in css,
similar questions : is-there-a-previous-sibling-selector and show-div-on-hover-with-only-css
do something like this
demo - http://jsfiddle.net/tbnsoc3y/
wrapping your content in div for eg like i have done
<div class="cont">
<div class="showme" id='makeMeWork'>Not Working</div>
<div class="showhim" id='clickMe'>Press ME</div>
</div>
Right Now There is No previous selection of sibling available but it will be soon in css4 which has been drafted in w3c and they are working on it , ill tell use jquery or css hack !
Read the article
Related
In the following markup, I want to apply css to only div with class .box which comes immediately after the .wrap. If it comes after the <p> or any other class than the .wrap, I do not want to select it.
<div class="wrap">
<div class="box">Apply style to this box</div>
<p>random</p>
<div class="box">Do not apply style to this box</div>
</div>
I have tried to look the adjacent sibling selector, but does not seem to work in this case.
.wrap + .box{
background: red;
}
JSFiddle: http://jsfiddle.net/8fjuz7sm/
I cannot use :first-child as it can occur only once too.
Write:
.wrap .box:first-of-type{
background:red;
}
DEMO here.
OR
.wrap .box:nth-of-type(1){
background:red;
}
DEMO here.
as #Hiral says, you'll have to either use first-of-type or nth-of-type(1).
If you cannot do this, but have access to the html, you'll have to add another class to the elements you wish to apply the class on, such as
<div class="wrap">
<div class="box red">Apply style to this box</div>
<p>random</p>
<div class="box">Do not apply style to this box</div>
</div>
or you can use javascript and/or jquery to select the first element then apply styling via javascript.
Jquery Example
$(".wrap .box").eq(0).css("Background-color","red")
I edited your JSFIDDLE : http://jsfiddle.net/8fjuz7sm/4/
I recommend using jQuery for this because older browsers may not support the pure css solution :
create a new class :
.wrapperbox {
background: red;
}
Then add this jQuery code to your script :
$( ".wrap > .box:first" ).addClass( "wrapperbox" );
After this every html element with the class wrap which has a child box will get a class wrapperbox and there you can do your css
When you dont want to do jQuery you can use this :
.wrap .box:first-of-type{
background:red;
}
It will select the first child of wrap with the class name box and then do your css
First of all thank you for your time reading my question!
I m trying to do a hover code to affect an element (nested div's background color) and I found some answers and tried them but couldn't get it to work. Is there a solution to get this to work without using JS/jQ? this is part of a wordpress loop, so using jquery to select elements may not be the best idea. Any thoughts? Thanks!
What I am trying to get is that when the user hovers over any part of div#press, only the div#text should change it's background color to #FFF (div#press remains the same)
<a href="press.php">
<div id="press" class="middle_bar">
<div id="text">
<h2><?php the_title(); ?></h2>
Published <?php the_time('j F Y') ?>
</div>
</div>
</a>
Thanks so much!
EDIT: It seems like setting a preset background color at #text breaks the code? Any reason why this happens? have attached the new code with inline styles
<a href="press.php">
<div id="press" class="middle_bar" style="padding: 200px">
<div id="text" style="float:left; width: 380px; margin-left: -25px; padding: 20px; background:#999999;">
<h2>1251515151</h2>
Published 11111
</div>
</div>
#press{
background:red;
height:50;
text-align:center;
}
#text{
height:50px;
width:50px;
background:dodgerblue;
}
#press:hover > #text{
background:#fff;
}
JSFiddle
If this isn't working for you, probably somewhere else you've a css selector having more specificity than the hover selector, may be inline styles... (injected by some script..?) )also watch out for !important
You'll need to use the :hover pseudo class on the <div id="press"></div>. In addition, you'll need to use the > descendant selector to target the <div id="text"></div> child.
You should be able to do something like the following:
#press:hover > #text {
background-color: #fff;
}
Demo: JSFiddle
I want to know if possible, how to aling on a same line the containing 'Quality Analyst', 'Celestica Sdn Bhd' and 'MYR 2xxx' without changing HTML
html :
<div class="colMiddle resume-detail-item-middle">
<div class="pageRow resume-detail-position long-text-word">Quality Analyst</div>
<div class="pageRow resume-company-location long-text-word">Celestica (AMS) Sdn. Bhd.</div>
<div class="pageRow resume-detail-item-inner resume-margin">
<div class="resume-detail-item-inner-left resume-summary-heading resume-label">Monthly Salary</div>
<div class="resume-detail-item-inner-middle resume-summary-heading">MYR 2,515</div>
... missing html
In a more clearer way :
<div class="outter-containement">
<div class="inner-content-1">inner-content-1</div>
<div class="inner-content-2">inner-content-2</div>
<div class="inner-content-3">
<div class="sub-inner-content-3-1">sub-inner-content-3-1</div>
<div class="sub-inner-content-3-2">sub-inner-content-3-2</div>
</div>
</div>
How can i align on a single line inner-content-1, inner-content-2 and sub-inner-content-3-2
http://jsfiddle.net/K58S2/14/
I would recommend changing the HTML like so: http://jsfiddle.net/K58S2/11/
However you said without changing the HTML, so here is a CSS answer: http://jsfiddle.net/K58S2/7/
.resume-detail-position, .resume-company-location{
float:left;
width:auto;
clear:none;
margin-right:7px;
}
.resume-company-location{
margin-top:1px;
}
You can use display:inline; to each div that's needs to be in line.
A better bet would be throw them in spans, like so:
<span> CONTENT </span>
<span> CONTENT </span>
<span> CONTENT </span>
However, if you insist on aligning divs, something like this would suffice:
<style type="text/css">
.example { float:left; }
</style>
<div class="example"> CONTENT </div>
<div class="example"> CONTENT </div>
<div class="example"> CONTENT </div>
The way i undersood your question, you will have to add a margin-right: to the outter container, the same width reserved of the container for 'MYR 2xxx'. Then, position:absolute; right:0; your container for 'MYR 2xxx', it will fit in.
For making your dividers aligned on a row, you will have to study your css and re-design it, because actually, your dividers take 100% width and clear:both; so you will have to manage all this because even if you attempt to float:left the containers, it won't work.
So, a short answer, yes you can do it with only .css. But be prepared for tricky css re-writing/overwriting.
An other aproach would be javascript, by removing your 'MYR 2xxx' container and replacing it in the normal flow, after 'Celestica Sdn Bhd'. For that approach, study jquery .detatch(), .append(), .appendTo() and insertAfter().
It would look like jsFiddled here :
$('.resume-detail-item-inner-middle.resume-summary-heading').insertAfter($('.pageRow.resume-company-location.long-text-word') );
But still you will have to rework your css.
Try adding the style property display:inline-block; to all three classes
For example:
.colMiddle {
display: inline-block;
}
Good day guys! I'm a newbie here and I'm just wondering how to use div id and div class. Let's say for example, I want to have many div boxes in my site with all the same styles in each box. Is this the right thing to do? Please enlighten me.
HTML:
<div id="body">
<div id="box1" class="style"></div>
<div id="box2" class="style"></div>
<div id="box3" class="style"></div>
//(and so on)//
</div>
CSS:
.style {
//(put elements here)//
}
There is not really a right thing to do as everything depends on the situation and circumstances.
Why would you think that this would be the "wrong" thing to do? This cuts down on the amount of code you have to write, so it is favorable, correct?
You can also use the IDs you have to override styles for the <div>s individually:
.style {
color: red;
}
#body1 {
color: blue;
}
Due to the fact that elements, IDs, and classes each have difference selector precedence, I advise against using anything except for classes and psuedo-classes no matter how attractive other prospects may seem. If you're disciplined about it, your CSS will be easier to update later on. The above example would work exactly the same if body1 were a class instead of an ID (I would suggest using IDs to identify unique elements for DOM manipulation, though).
I would also follow the W3C's advice when picking class names for elements and using them in your HTML:
...authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content.
ID's are unique:
-Each element can have only one ID
-Each page can have only one element with that ID
Classes are NOT unique:
-You can use the same class on multiple elements.
-You can use multiple classes on the same element.
Yes that would work. Though the id's would not be needed if all you want to do is apply the same style to all 3.
http://www.w3schools.com/tags/att_global_id.asp
http://www.w3schools.com/tags/att_global_class.asp
Yes You can do that if you want to have same style applied to all divs than you can definitely use class to apply styling to divs. If your div is going to be different than others than you can can probably use id which will allow you to access that div through javascript also.
If it is only styling then id is not really required and you need not to give class name if it is same class for all child divs.
HTML
<div id="body">
<div></div>
<div></div>
<div></div>
</div>
CSS
#body div {
background:red;
width:100px;
height:100px;
display:inline-block
}
DEMO
You can use "class" in many div's but you can use "id" in only one place. Because ID should be unique in each page.
<div id="body">
<div class="mystyle"></div>
<div class="mystyle"></div>
<div class="mystyle"></div>
//(and so on)//
</div>
<style>
.mystyle{color:#000;}
<style>
You can use this
<div id="demo">
<div class="box test"></div>
<div class="box test"></div>
<div class="box test"></div>
</div>
CSS:
#demo
{
margin:0;
padding:0;
}
.box
{
Width:100px;
height:50px;
background:red;
}
.test
{
color:white;
}
you can apply two class.
Is it possible to have a absolute-positioned, transparent div overlaying a series of divs that are clickable? I want to be able to hover over the red divs underneath in order to get a response.
<style type="text/css">
#holder{
width:200px;
height:200px;
}
.clickMe {
width:100px;
height:100px;
cursor:pointer;
background-color:red;
border:1px solid black;
float:left;
margin:-1px;
padding:0;
}
.hidey {
position:absolute;
top:0;
left:0;
z-index:50;
height:50%;
width:50%;
opacity:.25;
background-color:black;
}
</style>
<div class="hidey"></div>
<div id="holder">
<div class="clickMe"></div>
<div class="clickMe"></div>
<div class="clickMe"></div>
<div class="clickMe"></div>
</div>
Pointer-events can solve your problem. Pointer-events are supported in Firefox 3.6+, Safari 4 and Google Chrome so far (see compatibility table).
Because the top div will consume the mouse action the only way to do what you want (of which I'm aware) is to make the top div take an onClick action, then make a javascript function to pass that click to the divs underneath.
See this answer for details:
Trigger a button click with JavaScript on the Enter key in a text box
Your function will be a bit more involved, as you'll need to get the mouse position as well and use that to decide which box you're clicking.
See the second answer here for how to do that.
How do I get the absolute position of a mouse click from an onClick event on the body?
EDIT: SORRY, you said hover, not click. Make that onHover action, and pass a hover action, instead of a click. Same general idea though.
Let me suggest the simple old school method rather than going to any length to make this work.
Rather than the current structure of having a single wrapper around the inner elements, just give the individual elements a wrapper and put the event on those wrappers to find the child element.
I.E. rather than this:
<div class="wrapper">
<div class="clickMe">
...
</div>
<div class="clickMe">
...
</div>
</div>
Use this:
<div class="wrapper">
<div class="clickMe">
...
</div>
</div>
<div class="wrapper">
<div class="clickMe">
...
</div>
</div>
You'll have some extra markup in your HTML, but in my opinion, this could be preferable to the lengths you will need to go to make the current markup work. Just because new tech exists, doesn't mean it's the best tool for the job.