Using CSS selectors, I would like to, on click of a link, put a box shadow around a div one element up.
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div id="selected_div">
<a><p id="click"></p></a>
</div>
</div>
</body>
</html>
I do not know which selectors to use. Please enlighten me.
Considering that you want to do an action based upon a click, it's better to use Javascript anyway. CSS has no parent selector and cannot detect a click. Here is the jQuery solution:
$("document").ready(function() {
$("#selected_div a").click(function() {
$(this).parent().css("box-shadow", "2px 2px 3px #fff");
}
}
Remember to include the jQuery library.
You can't style parent objects based on the state of their children (as of CSS3). This is doable with JS, but not with pure CSS.
Using :target selector you can highlight the parent element. Have a look at DEMO.
CSS Use Here
:target
{
background-color: gold;
box-shadow:2px 2px 3px #eee;
}
#selected_div
{
border:1px dashed #cecece;
}
HTML Code Used here.
<div class="container">
<div id="selected_div">
<a href="#selected_div">
<p id="click">Sample TEXT</p>
</a>
This content should be selected.
</div>
</div>
Related
I have a HTML like the following :
<p style="color:red">go here</p>
Where A element is produced by Server Side code I haven't access .
In the browser go is red but here isn't due to some CSS code in the page's head element.
I'm wondering is there a way to make the link color inherit without adding style tags or JS codes in inappropriate place of HTML doc that would be stinky . Note that I have no access to whole document but just this section.
You can put style-tags in your body.
<style>
.red, .red a {
color: red !important;
}
<style>
<p class="red">go here</p>
You can use inherit for color property, which means that color property value will be inherited from it's parent
In your case you can do:
<p style="color:inherit">go here</p>
give a name to that div like this
<style>
.vhd p, a{color:red}
</style>
<div class="vhd">
<p>go here</p>
</div>
hope it will work for you
As far as I know, What you are trying to do is not possible INLINE,
You can add style tags in your page if you are able to.
<p class="red">go link</p>
<style>
.red a{
color: red
}
.red{
color: red;
}
</style>
<style>
red.a {
backgrond-color: red;
}
</style>
<div>
<p class="red">here</p>
</div>
or u can use <p class="red"><a href="#" style="color:red;>"here</a></p>
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
I have two divs side by side. When a hyperlink's state is active (when it's clicked), I want to hide the div to the left, using display: none;.
I did this about a year ago, but since this is my first site since then, I can't remember how I did it.
I know it can be done in CSS alone, using :active but just not sure how anymore. How can I do this?
Use the "general sibling" selector ~ in conjunction with a:active
HTML
Click Me
<hr />
<div class="foo"></div>
<div class="bar"></div>
CSS
a:active ~ .foo {
display: none;
}
It basically says: find the div with a class of foo that's a sibling of the active anchor and hide it. Not to be confused with the adjacent sibling selector, +
View the demo here: http://jsfiddle.net/DNy2B/
I am not sure if I understood your question correctly but if it is what I think you asked then do this
<div style="display: none;">
I am learning HTML, so I am kinda new and this might not be what u asked but I wanted to help so yeah :)
This will hide/show the div when the link is clicked.
<html>
<head>
<title>Title</title>
<script src="jq.js"></script>
<script>
$(document).ready(function() {
$("#link").click(function() {
$("#div2").toggle();
});
});
</script>
</head>
<body>
<div id="div1">
div1
<a id="link" href="#">hey</a>
</div>
<div id="div2">
div2
</div>
</body>
</html>
I Want to change the background of a Div when Hovering over another Div and i tried
HTML5 part:
<nav>
<div id="nav1"></div>
<div id="nav2"></div>
<div id="nav3"></div>
<div id="nav4"></div>
<div id="nav5"></div>
<div id="nav6"></div>
<div id="nav7"></div>
</nav>
<article>
<div id="nav8"></div>
</article>
And the CSS i tried is
#nav2
{
float:left;
height:429px;
width:34px;
background:url(images/nav_02.gif) no-repeat;
}
#nav2:hover #nav8
{
float:left;
height:429px;
width:445px;
background:url(images/nav_08-nav_02_over.jpg) no-repeat;
}
But it is not working ...
I need to do it with css only no javascript ..
The way CSS selectors works is Parent > Descendant
When you do
#nav2:hover #nav8
It means that #nav8 is a descendant of #nav2, which is not the case in your markup, so the rule does not apply
You have to use javascript to do what you're after.
It's impossibru. You can change the background of the div itself, and any child divs, when you are hovering it, but with a sibling/parent sibling/completely unrelated element - no way.
You could, however, do it in jQuery.
Example:
$("#nav2").mouseover(function() {
$("#nav8").addClass("someClassName");
});
$("#nav2").mouseout(function() {
$("#nav8").removeClass("someClassName");
});
And then hook up that background-image to #nav8.someClassName.
Use this Jquery code:
<script type="text/javascript">
$(document).ready(function(){
$("#nav2").hover(function(){
$("#nav8").css("background-image","url(images/nav_08-nav_02_over.jpg)");
},function(){
$("#nav8").css("background-image","");
});
});
</script>
There is no way you can add effects on same level tags in CSS3. On hover of a parent tag only child tags can have different CSS.
it's impossible unless your div are siblings, so you can achieve the effect using
+ adjacent siblings selectors (css2) or
~ general siblings combinator (css3)
e.g. if your markup is structured in this way
<div id="nav1"></div>
<div id="nav2"></div>
...
<div id="nav9"></div>
you can apply some style to nav2 hovering nav1 with
#nav1:hover + #nav2 { ... }
because nav2 is an immediate (adjacent) sibling of nav1 (in this case + or ~ would have the same effect), or you can do the same on nav9 hovering nav1 with
#nav1:hover ~ #nav9 { ... }
(here you can use only the ~ selector.)
Note also that these selectors are available on all modern browser including Internet Explorer 7+, see http://html5please.us/#gtie6
For example, in the following snippet:
<tr>
<td align="center">123</td>
<td class="someclass">abc</td>
</tr>
I would like select all <tr> elements that have a <td> with the class="someclass".
I am wondering if this is possible in css, without using javascript. Thanks.
What your asking for isn't possible. CSS reads left to right, meaning that you can't specify the parent element based on a childs attributes. You can do this in javascript but like you said you didn't want to use that.
Example HTML:
<div class="box">
<div class="green">
Some text
</div>
</div>
<div class="box">
<div class="red">
Some Text
</div>
</div>
Example CSS:
.box {
color: blue;
}
.box .green {
color: green;
}
.box .red {
color: red;
}
As you can see, you can select the parent element by itself but not based on a child's attributes.
Technically, you should always work outwards in. If you need a specific style to be applied on the parent you should add an extra class.
Example HTML:
<div class="box green">
Some Text
</div>
Example CSS:
.box.green {
color: green;
}
You can see in the above CSS that you can "stack" the classes to select the proper element.
Hope this helps, if you have any questions just ask. I can post a javascript variation that would be able to select an element based on child element attributes if you open a new topic for that.
To select elements with a particular class:
.someclass{
color: red;
}
I would like select all elements that
has a with class attribute
"someclass".
If by selection you mean node selection that you can only use JavaScript.
jQuery:
$(".someclass").doStuff();
But if by selection you mean CSS selection then:
CSS:
<element class="someclass"> can be selected using .someclass in CSS.