<div>highlight me</div><div><input /></div>
When the user puts their cursor in the input box and triggers :focus, I want to highlight the first div (apply a style to it).
non working example: https://codepen.io/samkeddy/pen/vJaqqv
Actually previous solution is absolute but If you dont want to use the javascript here you can go with little css i have done i dont if this helps you or not but a small approach towards your question
input:focus + .head{
color: red;
}
<input>
<div class="head">highlight me</div>
function highlight()
{
var div=document.getElementById("higlightDiv");
div.style.color="red";
}
div{
color:blue;
}
<div id="higlightDiv">highlight me</div><div><input type="text" onfocus="highlight();" /></div>
You can do it like this with javascript I guess
Related
I have a stylesheet that specifies a style for <LABEL>.
But some <LABEL>s are special: Currently I inline style them like this:
<LABEL style="text-align:right; line-height:15pt">
<div style="padding-right:20px">My Label Text</div>
</LABEL>
I suspect there's a way to specify a CSS class, perhaps called rightlabel, to render the preceding using something simple like this:
<LABEL class="rightlabel">My Label Text</LABEL>
What would the correct way be to do that? I.e., is there a way to define rightlabel in CSS to produce the overridden <LABEL> while automatically wrapping its children in a padded child container (because the style doesn't work correctly unless that is done, and it doesn't seem proper to depend on the coder to implement two elements to get the style right)?
Amendment: I can get most of the way there using a child selector – as shown in this fiddle with this CSS:
.rightLabel {text-align: right}
.rightLabel > * {padding-right: 20px}
But I can't find a way to apply the padding to the label contents without explicitly wrapping the contents in some container. I.e., the above CSS works correctly on
<LABEL class="rightLabel">
<div>This is what we wanted!</div>
</LABEL>
but not on
<LABEL class="rightLabel">Why am I not padded?</LABEL>
Is it possible to apply a style to the <LABEL> contents without explicitly coding them inside another HTML element (child)?
Define your styles like so:
<style>
.rightLabel
{
text-align:right;
}
.rightLabel div
{
padding-right:20px;
}
</style>
Update to updated question: you can't add a div using CSS, you'll need JavaScript. You can add pseudo elements using :before and :after.
Here's a fiddle https://jsfiddle.net/c3h9a2b9/1/
.rightLabel:before {
display:block;
content:' ';
width:20px;
float:right;
}
This fakes the padding by using the :before or :after pseudo element on your label. It needs a display of block (inline-block would also do) and some dimensions, the width here being 20px (the "padding" that you need) and floated in the direction you want padding....
If I understood correctly your question the answer is this CSS:
label{
//Your general label style
}
label.rightlabel{
text-align: right;
line-height: 15pt;
}
label.rightlabel div{
padding-right: 20px;
}
With this HTML should act as you wish
<label>a normal label</label>
</label class="right label"><div>the special label</div></label>
This works because more specific CSS overrides less specific one by default :)
In my site there're two different div, but they have the same parent div (two child div). So, I want to do this: div.1:hover -> div.2{display:none}. How can I do it using CSS?
Depending on the way your HTML is laid out it can work. The divs need to be next to each other like so:
<div class="first">
First div
</div>
<div class="second">
Second div
</div>
Then use this CSS:
div.first:hover + div.second { display: none; }
Fiddle here: http://jsfiddle.net/CyT2N/
You can easily accomplish that with JQuery.
$(document).ready(function(){$("#first").hover(function(){$("#second").hide();}, function(){$("#second").show();});});
Explanation:
this code adds a "hover" handler for the first element on document.ready, when the mouse enters we hide the second element, and when the mouse leaves, we show it again.
This way, it will work no matter where the elements are within the layout.
See here: http://jsfiddle.net/avrahamcool/RenK2/
Edit
If you want the second div to hide when the first one is clicked, use $("#first").click(function(){$("#second").hide();}) instead of hover(..)
See here: http://jsfiddle.net/avrahamcool/RenK2/1/
Here is a simple way of doing it:
If you have HTML similar to this:
<div class="wrap">
<div class="first">First div</div>
<p>some other element...</p>
<div class="second">Second div</div>
</div>
your CSS would be:
.first:hover ~ .second {
display: none;
}
Demo at: http://jsfiddle.net/audetwebdesign/HQN6n/
The one limitation that .first and .second must be sibling elements within the same parent element, .wrap in this example.
The general sibling combinator ~ is supported for IE7+
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors
so I'm having a bit of a tough time figuring this out.
I want to edit some links within a specific div, seems simple enough right?
Just put
#mydiv a:link {color:#B40404}
However it does not seem to be working for me! Below is my code:
<div id="leftcontent"><div id="MYDIV">why this is no work</div>
CSS:
#MYDIV {
background-image: url(http://mypicture.com/mypic.jpg);
width:290px;
height:280px;
font-family:Tahoma,Geneva,sans-serif;
padding:25px;
background-repeat:no-repeat;
}
#MYDIV a:link {color:#B40404; }
I have no idea why this isn't working. Any help appreciated!
Thanks
HTML should be like below (a tag inside the div)
<div id="leftcontent">
<div id="MYDIV">why this is no work</div>
</div>
CSS
#MYDIV a{color:#B40404; text-decoration:none}
DEMO
In your case (div inside the a tag) you need not to write id name in css directly write style for a tag
a{color:#B40404; text-decoration:none }
or
#leftcontent a{color:#B40404; text-decoration:none }
DEMO 2
Your CSS is selecting an tag INSIDE a tag. You either need to do the following:
a #MYDIV { /* css code */ }
or
<div id="MYDIV"><a>My link here</a></div>
EDIT:
I just read your comment on the other page. In that case, you need to add either a class or an ID to the and then reference that.
<div id="leftcontent"><div id="MYDIV">why this is no work</div>
CSS
#myLink { /* add style here */ }
<div id="leftcontent"><div id="MYDIV">why this is no work</div>
in css
#MYDIV a:link {color:#B40404; }
i think you need not style the hyperlink in your case.
Since the styling would ultimately would be applied to your div is enclosed within the anchor tag. So give the color: #your_hex_code to the #MYDIV which would suffice your need. That is what you need.
If you made a mistake in the html, Sowmya answer is perfect.
Optional:
Moreover you can use jquery to style that, $("#your anchor").parent().css or use closest.
Thanks
this way is not a correct formating in coding html this will not validate in html validator
<div id="leftcontent">
<a href="http://google.de">
<div id="MYDIV">why this is no work</div>
</a>
</div>
instead of that do this
<div id="leftcontent">
<div id="MYDIV">
sample
</div>
</div>
if you want the whole div link add basic style in your div a
css
#MYDIV {
float:left;
}
#MYDIV a {
float:left;
width:100px;
height:100px;
}
Can you use the word div to name a div class? or id?
for example:
#div.leftcol
or does it just get seen as
#leftcol
The browser will see that as <div id="div" class="leftcol"></div>
I don't follow what you mean, but I think what you're asking is can you use the word div to apply a class to div elements. If that's what you mean, then yes you can, and you do it exactly as you have shown in your question:
div.leftcol { color: red }
That style would be applied to all elements of type div with class leftcol. Without the div part, the style would apply to any element with class leftcol, regardless of what type of element it is:
.leftcol { color: red }
Edit now the question has been edited...
After the edit to your question, it makes a bit more sense (I think). Your first example would apply to an element with an id of div and a class of leftcol:
<div id="div" class="leftcol"></div>
The second example would apply to an element with an id of leftcol:
<div id="leftcol"></div>
Or if you are simply asking whether div is a some sort of reserved word in CSS, no, it's not, so feel free to use it as an identifier. However, that could get confusing (for example, you could end up with selectors like div.div #div)
can you provide an example?
you can use <div class="leftcol"> left content </div>
and then in your css .leftcol { background:red; }
you can address it either div.leftcol or just simple .leftcol
As in?
<div id="div.leftcol">Some content</div>
While it may work for HTML and Javascript it should cause a problem if you try to style it in a CSS stylesheet. As I am sure you know the following
div.leftcol {
color: #efefef;
}
means "Set the text color to #efefef for any div element that has leftcol as a class name" so it would not work. I have no idea if
div.div.leftcol {
color: #efefef;
}
would work but that is just ugly...
I have a menu and three hidden divs that show up depending on what option the user selects. I would like to show / hide them on click using only CSS. I have it working with jquery right now but I want it to be accessible with js disabled. Somebody here provided this code for someone else but it only works with div:hover or div:active, when I change it to div:visited it doesn't work. Would I need to add something or perhaps this isn't the right way to do it? I appreciate any help :)
The thing is my client wants this particular divs to slide/fade when the menu is selected, but I still want them to display correctly with javascript turned off. Maybe z-index could do the trick...?
For a CSS-only solution, try using the checkbox hack. Basically, the idea is to use a checkbox and assign different styles based on whether the box is checked or not used the :checked pseudo selector. The checkbox can be hidden, if need be, by attaching it to a label.
link to dabblet (not mine): http://dabblet.com/gist/1506530
link to CSS Tricks article: http://css-tricks.com/the-checkbox-hack/
This can be achieved by attaching a "tabindex" to an element. This will make that element "clickable". You can then use :focus to select your hidden div as follows...
.clicker {
width:100px;
height:100px;
background-color:blue;
outline:none;
cursor:pointer;
}
.hiddendiv{
display:none;
height:200px;
background-color:green;
}
.clicker:focus + .hiddendiv{
display:block;
}
<html>
<head>
</head>
<body>
<div>
<div class="clicker" tabindex="1">Click me</div>
<div class="hiddendiv"></div>
</div>
</body>
</html>
The + selector will select the nearest element AFTER the "clicker" div. You can use other selectors but I believe there is no current way to select an element that is not a sibling or child.
Although a bit unstandard, a possible solution is to contain the content you want to show/hide inside the <a> so it can be reachable through CSS:
http://jsfiddle.net/Jdrdh/2/
a .hidden {
visibility: hidden;
}
a:visited .hidden {
visibility: visible;
}
<div id="container">
<a href="#">
A
<div class="hidden">hidden content</div>
</a>
</div>
Fiddle to your heart's content
HTML
<div>
<a tabindex="1" class="testA">Test A</a> | <a tabindex="2" class="testB">Test B</a>
<div class="hiddendiv" id="testA">1</div>
<div class="hiddendiv" id="testB">2</div>
</div>
CSS
.hiddendiv {display: none; }
.testA:focus ~ #testA {display: block; }
.testB:focus ~ #testB {display: block; }
Benefits
You can put your menu links horizontally = one after the other in HTML code, and then you can put all the content one after another in the HTML code, after the menu.
In other words - other solutions offer an accordion approach where you click a link and the content appears immediately after the link. The next link then appears after that content.
With this approach you don't get the accordion effect. Rather, all links remain in a fixed position and clicking any link simply updates the displayed content. There is also no limitation on content height.
How it works
In your HTML, you first have a DIV. Everything else sits inside this DIV. This is important - it means every element in your solution (in this case, A for links, and DIV for content), is a sibling to every other element.
Secondly, the anchor tags (A) have a tabindex property. This makes them clickable and therefore they can get focus. We need that for the CSS to work. These could equally be DIVs but I like using A for links - and they'll be styled like my other anchors.
Third, each menu item has a unique class name. This is so that in the CSS we can identify each menu item individually.
Fourth, every content item is a DIV, and has the class="hiddendiv". However each each content item has a unique id.
In your CSS, we set all .hiddendiv elements to display:none; - that is, we hide them all.
Secondly, for each menu item we have a line of CSS. This means if you add more menu items (ie. and more hidden content), you will have to update your CSS, yes.
Third, the CSS is saying that when .testA gets focus (.testA:focus) then the corresponding DIV, identified by ID (#testA) should be displayed.
Last, when I just said "the corresponding DIV", the trick here is the tilde character (~) - this selector will select a sibling element, and it does not have to be the very next element, that matches the selector which, in this case, is the unique ID value (#testA).
It is this tilde that makes this solution different than others offered and this lets you simply update some "display panel" with different content, based on clicking one of those links, and you are not as constrained when it comes to where/how you organise your HTML. All you need, though, is to ensure your hidden DIVs are contained within the same parent element as your clickable links.
Season to taste.
In 2022 you can do this with just HTML by using the details element. A summary or label must be provided using the summary element. details is supported by all major browsers.
<details>
<summary>Click Here for more info</summary>
Here is the extra info you were looking for.
</details>
HTML
<input type="text" value="CLICK TO SHOW CONTENT">
<div id="content">
and the content will show.
</div>
CSS
#content {
display: none;
}
input[type="text"]{
color: transparent;
text-shadow: 0 0 0 #000;
padding: 6px 12px;
width: 150px;
cursor: pointer;
}
input[type="text"]:focus{
outline: none;
}
input:focus + div#content {
display: block;
}
<input type="text" value="CLICK TO SHOW CONTENT">
<div id="content">
and the content will show.
</div>
A little hack-ish but it works. Note that the label tag can be placed any where. The key parts are:
The css input:checked+div selects the div immediately next to/after the input
The label for said checkbox (or hey leave out the label and just have the checkbox)
display:none hides stuff
Code:
<head>
<style>
#sidebar {height:100%; background:blue; width:200px; clear:none; float:left;}
#content {height:100%; background:green; width:400px; clear:none; float:left;}
label {background:yellow;float:left;}
input{display:none;}
input:checked+#sidebar{display:none;}
</style>
</head>
<body>
<div>
<label for="hider">Hide</label>
<input type="checkbox" id="hider">
<div id="sidebar">foo</div>
<div id="content">hello</div>
</div>
</body>
EDIT: Sorry could have read the question better.
One could also use css3 elements to create the slide/fade effect. I am not familiar enough with them to be much help with that aspect but they do exist. Browser support is iffy though.
You could combine the above effect with javascript to use fancy transitions and still have a fall back. jquery has a css method to override the above and slide and fade for transitions.
Tilda(~) mean some sibling after; not next sibling like plus(+).
[key="value"] is an attribute selector.
Radio buttons must have same name
To string tabs together one could use:
<html>
<head>
<style>
input[value="1"]:checked ~ div[id="1"]{
display:none;
}
input[value="2"]:checked ~ div[id="2"]{
display:none;
}
</style>
</head>
<body>
<input type="radio" name="hider" value="1">
<input type="radio" name="hider" value="2">
<div id="1">div 1</div>
<div id="2">div 2</div>
</body>
</html>
You could do this with the CSS3 :target selector.
menu:hover block {
visibility: visible;
}
block:target {
visibility:hidden;
}
You're going to have to either use JS or write a function/method in whatever non-markup language you're using to do this. For instance you could write something that will save the status to a cookie or session variable then check for it on page load. If you want to do it without reloading the page then JS is going to be your only option.
if 'focus' works for you (i.e. stay visible while element has focus after click) then see this existing SO answer:
Hide Show content-list with only CSS, no javascript used
You can find <div> by id, look at it's style.display property and toggle it from none to block and vice versa.
function showDiv(Div) {
var x = document.getElementById(Div);
if(x.style.display=="none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<div id="welcomeDiv" style="display:none;" class="answer_list">WELCOME</div>
<input type="button" name="answer" value="Show Div" onclick="showDiv('welcomeDiv')" />
With this method, when you click on Nav Dropdown elements it will NOT disappear, unlike plain :focus solution.
key is:
tabindex in parent element
parentDiv:focus-within hiddenDiv { display: block;}
it will work with both: display and visibility css;
HTML code:
<div className="DevNavBar dbb">
{/* MAKE SURE TO ADD TABINDEX TO PARENT ELEMENT, OTHERWISE FAILS */}
<div className="DevNavBar_Item1 drr" tabIndex="0">
item1
<div className="DevNavBar_Item1_HiddenMenu dgg">
<ul>
<li>blah1</li>
<li>blah2</li>
</ul>
</div>
</div>
</div>
CSS code:
.DevNavBar {
padding: 40px;
}
.DevNavBar_Item1 {
padding: 20px;
width: fit-content;
cursor: pointer;
position: relative;
}
.DevNavBar_Item1:hover {
color: red;
}
.DevNavBar_Item1_HiddenMenu {
display: none;
position: absolute;
padding: 10px;
background-color: white;
z-index: 10;
left: 0;
top: 70px;
}
.DevNavBar_Item1:focus {
color: red; // this is so that when Nav Item is opened, color stays red
}
.DevNavBar_Item1:focus-within .DevNavBar_Item1_HiddenMenu {
display: block;
color: black; // this is to remove Bubbling, otherwise it will be RED, like the hover effect
}
Here is Video Demo I created on my youtube channel (note: this is my youtube channel, so I am affiliated to that channel), the link is for 'show and tell' purposes: https://youtu.be/QMqcZjmghf4
CSS does not have an onlclick event handler. You have to use Javascript.
See more info here on CSS Pseudo-classes: http://www.w3schools.com/css/css_pseudo_classes.asp
a:link {color:#FF0000;} /* unvisited link - link is untouched */
a:visited {color:#00FF00;} /* visited link - user has already been to this page */
a:hover {color:#FF00FF;} /* mouse over link - user is hovering over the link with the mouse or has selected it with the keyboard */
a:active {color:#0000FF;} /* selected link - the user has clicked the link and the browser is loading the new page */