Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
How to highlight last div with class="block" in the following html-structure, if the number of div with class="block" is unknown? (With help of css-selectors)
http://codepen.io/Feel_codepen/pen/Ifjzd
There, for example, I can highlight third div.
You can try this using :last-of-type
div.block:last-of-type{
color:yellow;
}
CodepenDemo
Use last-child:
.main .block:last-child{
background-color:#FCC;
/* Your styles*/
}
CodePen
You could use the :last-child selector.
More information could be found at http://css-tricks.com/almanac/selectors/l/last-child/
.main .block:last-child {
background-color: yellow;
}
http://codepen.io/anon/pen/vpqad
By using the last-child pseudo class
.block:last-child{
background-color: yellow; /* or some other color */
}
http://www.w3schools.com/cssref/sel_last-child.asp
Try this
.block:last-child
{
background-color:blue;
}
DEMO
And Magic!
.main>div[class=block]:last-child{
background-color:blue;
}
this should do it :P i hope
Try to use
$("div:last-child").addClass("last-child");
With this you can add a css class to the last child of a certain div or element
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Hello I am making a dummy promotion page and I am not sure why I have so much
spacing under my h1 tags.
Also for my footer, my li's dont seem to inherit the hover effect?
My li:hover works locally but not when I transfer it over on ftp.
Poking around on your site I found some problems (Chrome inspect is a powerful tool)
In your css/style.css you're setting the hover style on the < li> element, but it's the < a> element you should change the styling of. Change nav li:hover and h1 to this:
nav a:hover {
background: #222; // Looks better
color: #1CDFED;
text-decoration: underline;
}
h1 {
display: inline-block;
margin: 0;
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
Here is the fiddle: Fiddle
Why there is space between textarea and button and how to remove it?
I have tried setting margin and padding to 0 but it didn't help.
It is because of the line-height for .wrapper class. Add the following style in your css.
.wrapper{line-height:0px}
DEMO
EDIT:
The above solution is working fine in Chrome and Firefox. In IE it will truncate all the line-height for child elements. So you have to mentioned explicitly line-height for inner elements like below.
textarea,
submit_raw_wrapper,
button {
margin:0;
padding:0;
line-height:16px;
}
DEMO
just adjust the floating:
eg.
textarea,
submit_raw_wrapper,
button {
margin:0;
padding:0;
float:left;
}
textarea,
submit_raw_wrapper,
button {
margin:0;padding:0;float:left;
}
DEMO
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I've seen many CSS3 examples of doing a show/hide, but I don't want to be able to hide the hidden div again, just need a "show" link, that upon being clicked, shows the hidden div and hides the "show" link. I've seen some good hacks done with input buttons, how can I do this specific method of showing hidden content?
As commented earlier with help from input and :checked pseudo-class, for younger browser : DEMO
HTML basis
<div>
<input id="hidiv" type="checkbox" value=""/>
<label for="hidiv" > Show more </label>
<div class="toshow">div to show </div>
</div>
CSS basis
#hidiv {
position:absolute;
left:-9999px;
}
label {/* for demo , style with link defaut style */
display:inline-block;
color:blue;
text-decoration:underline;
cursor:pointer;
}
.toshow ,
#hidiv:checked + label {
display:none; /* once input checked, you cannot checked it anymore via the click */
}
#hidiv:checked ~ .toshow {
display:block;
}
You can have many boxes with each its own input and label.
One way to do this is using the :target pseudo selector, very [very] simple example:
<style>
#state_b { display: none; }
#state_b:target { display: block; }
#state_b:target + a { display: none; }
</style>
<div id=state_b>hello world</div>
<a href=#state_b>show</a>
You can use this technique to change states, however you wouldn't be able to have multiple boxes like this on the same page.
JSFiddle example
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 9 years ago.
Improve this question
Is it possible to target the first .col/h2 and add a CSS style of padding-top:0px?
<div class="container">
<div class="holder">
<article class="col"><h2>xxxx</h4></article>
<article class="col"><h2>xxxx</h4></article>
<article class="col"><h2>xxxx</h4></article>
<article class="col"><h2>xxxx</h4></article>
</div>
</div>
You can use the pseudo-class :first-child to accomplish that.
.container .holder article:first-child {
padding-top: 0px;
}
Also, just a heads up, you are closing your <h2> tag with an </h4>.
Yes, it's possible. Use :first-child:
.col:first-child h2 {
padding-top: 0px;
}
:first-child
The :first-child CSS pseudo-class represents any element that is the first child element of its parent.
DEMO
pseudo-class :first-child
.col h2:first-child {
padding-top: 0;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions must demonstrate a minimal understanding of the problem being solved. Tell us what you've tried to do, why it didn't work, and how it should work. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I'm working on my website, and was wondering how to do this hover effect like on this site:
http://www.level1productions.com/athletes.cfm?catID=4
Add :hover to your li class
li.classname {color: #fff}
li.classname:hover {color: #000}
Now when you hover over the element the color of the text will change.
you can easily achieve your desired result with simple html and css
HTML
<div>Shailender Arora
<span>UI Developer</span>
</div>
CSS
div {
background:red;
width:200px;
height:50px;
}
span {
display:block;
color:red;
}
div:hover {
background:yellow;
}
DEMO
Do it with CSS. In CSS there are some thing called pseudo elements and they act as type of functions used for altering the markup tags.
For hover this one is used: :hover
The colon here is very necessasry.
Usage:
tag_name:hover { /*CSS*/ }
Read more about :hover here.