I am wondering how i would be able to style links inside a given div with a given class like
.navigation-div : a:link,a:visited {
color:red;
}
Some html
<div class="navigation-div">
Home
List
Download
Files Used
Documentation
</div>
<div class="client-header">
<h1>CRUD Application</h1>
</div>
Is there a selector for this kind of thing?.
.navigation-div a:link, .navigation-div a:visited {
color:red;
}
jsFiddle example
Related
I'm looking for a neat way to solve the given problem:
Let's say we have an article, and I want to style every h1, h2 in unless they are located in the <div ="example">
<article class="article">
<h1>Direct Child 1</h1>
<h2>Direct Child 2</h2>
<div class="example">
<h1>Example Child 1</h1>
<h2>Example Child 2</h2>
</div>
<div class="other-div">
<h1>Indirect Child 1</h1>
<h2>Indirect Child 2</h2>
</div>
</div>
Now in pure CSS the solution is simple:
.article > h1,
.article *:not(.example) h1 {
color: red;
}
.article > h2,
.article *:not(.example) h2 {
color: blue;
}
All h1s are red, and h2s are blue, unless they're within <div class=example>" - Pen
In LESS, however, I can't find a clean way to do this.
.article {
& :not(.example) {
h1 {
color: red;
}
h2 {
color: blue;
}
}
}
I'm looking for a way to add <div class=article>" direct child h1s and h2 into the mix while keeping it DRY.
I guess the main show-stopper for your attempt is the limitation of Less requiring a selector combinator (like >) to always go before a selector element (so neither & > nor > alone can work).
There's workaround however:
.article {
#-: ~'>';
#{-}, *:not(.example) {
h1 {color: red}
h2 {color: blue}
}
}
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<div class="list-group">
Home
Quem-somos
FAQ
</div>
</div><!--/span-->
</div><!--/row-->
I have this code above, and i want highlight the current page with the danger color, but the .active class it's blue in this particular code.
I already try setup in my stylesheet:
.active {
background-color: red;
}
but has no effect
Even though specifying !important will work, this is is bad practice as it stops the css cascading and will probably cause more problems than it fixes. All you need to do is to be more specific with your selector.
.list-group a.active { background-color: red;}
See my Example
You could force the override with !important like so:
.active {
background-color: red !important;
}
This worked for me:
a.list-group-item.active {
background: red;
}
Following is the html structure, that is repeating inside my html page.
<article class="tweet-inner">
<div class="tweet">
<div class="text">
<p>Coming down! Time for Croation BBQ </p>
</div>
<p class="last">
<span class="pull-right">
<small> Hello this is first text </small>
<small> Hello this is second text </small>
</span>
</p>
</div>
</article>
The above is one unit of repeating structure inside my HTML.
The functionality I want is, when you hover over the tweet text, .tweet .text p then the content of .last should show.
I did the following :
.last{
display: none;
}
.tweet .text p:hover .last{
display: block;
}
Two doubts :
You should be able to see the .last of only the element upon which you have hovered.
The above is not working, the fiddle is http://jsfiddle.net/EymLT/
Thanks!
Your CSS selector is incorrect. Firstly .last is not a child of .text, and the p element cannot be hovered because it is invisble. Try this:
.tweet:hover .last{
display : block;
}
Updated fiddle
Replace your last style with this:
.tweet .text:hover + .last{
display : block;
}
You can use ~ in CSS
DEMO http://jsfiddle.net/kevinPHPkevin/EymLT/4/
.last{
display:none;
}
.text:hover ~ .last{
display : block;
}
If you replace my ~ with > it will be more browser compatable. The > ensures only the child is seleted so you can use a parent div as the hover target.
.last{
display:none;
}
.tweet:hover > .last{
display : block;
}
I know many inheritance questions have been asked, but each case is unique and I'm having trouble with this one.
I have some h2 elements that need to have unique styling to them but they keep inheriting properties from previously defined h2 elements.
I've tried giving them a unique class, I've tried defining css properties through JS and Jquery, nothing's working.
Here's an example of what I'm talking about:
<div class="parent">
<h2>Original H2</h2>
<div class="child">
<h2>New H2</h2>
</div>
</div>
.parent h2 {
font-weight:bold;
color:red;
}
.child h2 {
font-weight:normal;
color:green;
}
Even with giving the child's h2 tag a unique class I get nowhere.
<div class="parent">
<h2>Original H2</h2>
<div class="child">
<h2 class="newh2class">New H2</h2>
</div>
</div>
.parent h2 {
font-weight:bold;
color:red;
}
.child h2.newh2class {
font-weight:normal;
color:green;
}
<!--or-->
h2.newh2class {
font-weight:normal;
color:green;
}
Can anyone help out?
you need to use !important value to make it so.
h2.newh2class {
font-weight:normal;
color:green !important;
}
You css should look like this
.parent > h2 {
font-weight:bold;
color:red;
}
.child h2 {
font-weight:normal;
color:green;
}
check it here http://jsfiddle.net/yNFUd/
Your issue is CSS because of how your are referencing the element. Read about stacking and precedence in CSS
http://jsfiddle.net/feitla/SmUGm/2/
.parent > h2 {
font-weight:bold;
color:red;
}
.parent .child h2 {
color:blue;
}
.child > h2 {
font-weight:normal;
color:green;
}
Changing the order and how they are called will affect how they are inherited and calculated.
Now I have my code in this way;
CSS:
.dhimage{
width:25px;
height:25px;
}
JAVASCRIPT:
var image = document.createElement('img');
image.className= 'dhimage';
What changes if i format CSS like this:
.something .dhimage{
width:25px;
height:25px;
}
it means, your newly created image has to be inside a container having class something, only then the properties of class dhimage will be applied to it. i.e
<div class="something" >
<img class="dhimage" />
</div>
if your markup is like above, then only below css will work
.something .dhimage
{
width:25px;
height:25px;
}
it is called CSS specificity .
however, if you directly define the css i.e.
.dhimage
{
width:25px;
height:25px;
}
it will work independent of the parent's CSS.
Now why is it done.
say you have a class name menu. but you want the menu class to be different for menus inside the footer of your page and different for the menus inside header of your page,but still you want to keep the name menu because you also have certain common rules for all the menus on the site like font-family or whatever. then you can define it as follows:
.menu
{
font-family:'Times';
}
.header .menu
{
color:Red;
}
.footer .menu
{
color:Orange;
}
and your markup is like
<div class="header">
<ul class="menu">
</ul>
</div>
<div class="content">
</div>
<div class="footer">
<ul class="menu">
</ul>
</div>
your header and footer menu will have different color.
Nothing, really, except for the fact that, in order for the styling from .dhimage to be effective, the element containing that class must be inside an element with the class .something.