I know that when I want to apply a hover effect to ALL divs inside a well I can use this code:
.well:hover div {
background-color:green
}
But now I want to apply the hover effect only to divs I wish inside this well. How can I specify them? I tried something like this:
.well:hover div1,div2,div9 {}
but that doesnt seem right. How to do it?
When using comma, each entry is a separate selector:
So you should do it like this:
.well:hover div1,
.well:hover div2,
.well:hover div9 {
/* your styles here */
}
Unless you are using a preprocessor, this can't be shortened.
Maybe I'm not reading this right but you would just want to use .well div:hover as your css selector to apply individual hover effects to those divs.
Add a class to the divs inside the well you want to affect and then add to css:
.well .my-hover-class:hover {
/// do something
}
Related
Sorry, probably not the best title ever. I'm having trouble with a few things in my code that I'm using to practice html/css.
h1:hover is responding whenever I hover my cursor over anything at the same height as the h1 heading.
I'm also having trouble linking it. See the code below.
<h1>Bing</h1>
I'd also like to know how to target specific things in the HTML code via CSS. For example if I import an image in HTML using IMG how would I edit just that image in CSS?
Thank you.
H1 is a block element, so it spans across total width of the page. To limit this effect, you must apply it a fixed width, or "display:inline-block;"
For the second question, the right code is:
<h1>Bing</h1>
First, h1 by default spans the entire width of the page. Try changing it to an inline-block element like so:
h1 {
display:inline-block;
}
Second, you need to put the a tag inside of your h1 tag and put the text inside of the a in order for it to function as a link.
<h1>Bing</h1>
Third, in order to target specific img elements, you can assign them a class or and id and target the desired one. For example:
HTML
<img id="myImage" src="whatever.jpg"/>
CSS
#myImage {
width: 250px;
}
Your anchor should be inside your h1, then you can apply any hover changes to the anchor:
HTML:
<h1>Bing</h1>
CSS:
h1 > a:hover {
color:#F00;
}
I have very limited knowledge of coding, html/css, but I have a problem which makes me want to learn more. Anyway, I want to change the font-size inside a <span>, nested inside the code of the page. The complete code-snippet looks like this:
<span style="font-size: 11px;">Buy</span>
I want to change that to font-size:14px;. But, since there is no class/ID, just a <span>, I don't understand how to change it. And as I said, it's deep within the document and there are at least 20 divs or some wrapped around it.
Is there a way to target that span, and maybe get the "path". I've been fiddling with Developer Tools in Chrome but I really don't see how XPath can help me?
To sum it up - how do I overwrite inline css (without a class or ID), from an external css?
Thank you.
Sorry if you have already tried this but !important in your css declaration will override any css declarations
You can declare a property as final( in my word ) as below.
Try this in external:
selector {
font-size: 14px !important;
}
You need to have an id to change that particular span's font size. If you change for span than it will affect all spans in the document. Or if the span has a parent element you can select that
.parent span {
font-size:14;
}
update
needs to have !important to override the inline rule.
but who uses inline rules anyways. you shouldn't.
Add a class to it and then target
<span class="target">Buy</span>
Adding a "new" class wont hurt
You cannot target it without a class directly.. maybe the parent div has a class then
<div class="parent">
<span style="font-size: 11px;">Buy</span>
</div>
.parent span{
font-size: 18px !important;
}
You will ahve to use !important to override the inline css.. also keep in mind that this will effect all span inside a div with class of parent
<div style="background: red;">
The inline styles for this div should make it red.
</div>
We can fight that with this:
div[style] {
background: yellow !important;
}
Of course just add a class to the div before [style] to change the div with class you added.
example:
div.myclass[style]
I have a problem here that i can't seem to figure out, till now my css has been a little slapdash and it was always a case of hack away till it looks right but i've decided to learn it properly and i'm trying to categorize things as much as i can.
So i have a layout that has an unordered list, this list has three li tags, within each of these li tags are two div each.
Now i have a class for each of these containers, they can be called container_1 container_2 and so on.
Now they have some unique attributes to each of them but they al also follow a set style for example, the divs in each li are side by side so its sets of two divs also they are all going to have round corners.
So i thought i could make a class class rounded_corners plus float_left and float_right so instead of re typing the code to round the corns or float something i could just reference thing class like this:
.container_1 .rounded_corners .float_left
{
}
.container_2 .rounded_corners .float_right
{
}
But when i use this i loose my styling so i used a comma and this allowed the sty;ing for the div to come back but the corners and floats didn't work.
So where am i going wrong with this?
This is my code, i have taken the code out that breaks the layout, but if you remove the comments you can see what happens.
http://jsfiddle.net/ragebunnykickass/g3Zaz/
The naming is a little different but you'll know what is meant.
Thanks.
CSS classes cannot inherit so what you have to do is split them to be as much atomic as possible. For example if you have a rounded-corners class and it may be applicable to containers:
.rounded-corners
{
/* Your CSS to define rounded corners */
}
Note that you define ONLY the properties for rounded corners. Now let's say you have a class to style containers (for example with a proper padding):
.container
{
/* Your CSS to define a nice container */
}
How to combine them together? This won't be done in CSS but in HTML, in this example this <div> inherits from both container and rounded-corners:
<div class="container rounded-corners">
</div>
Now suppose you need rounded corners for a non container object:
<div class="rounded-corners">
</div>
This is how CSS works. Do not compare them (because of name) with classes of object oriented languages. Each class define a set of attributes that will be applied to all elements that belong to that class. Final element style is the composition of the attributes inherited from each class that element belongs to.
NOTE: to summarize: answer is yes, you may have to repeat some code. You'll have trouble to manage your code (both HTML and CSS) if you use classes as short names for a style: you'll see you missed the point to separate content from style (because in HTML you'll define, using a class like rounded-corners, an explicit appearance). Imagine: next month you have to change your web-site style and fashion requirements impose you have square corners. You have to change your HTML code (unless you accept to have a rounded-corners class to apply a squared border). Much better if you simply say container and you let your CSS to define (and know) how a container should be rendered.
It may be applicable to you or not (it depends on your preferences, taste and development environment) but you may take a look to LESS. It's implemented as a JavaScript that will parse your CSSs. Of course you won't write a pure valid CSS but you'll gain many new features. In your case you may find mixins are what you need:
.rounded-corners
{
/* Your CSS here */
}
.float-left
{
/* Your CSS here */
}
.container
{
.rounder-corners
.float-left
}
You could have a CSS code like:
.container_1 {
}
.rounded_corners {
}
.float_left {
}
and then set a class to HTML element in this way:
<div class="container_1 rounded_corners float_left">...</div>
So the DIV element will inherit every style of every class!
Obviously, DIV it's just an example, you could use every tag!
If i get it well, you want a set of classes to apply to each div?
I'd break it up like that :
css
.rounded_corners {}
.float_left {}
.float_right {}
.container {}
and in the html
<li id="container_1" class="container float_left rounded_corners">...</li>
<li id="container_2" class="container float_right rounded_corners">...</li>
etc...
I'm trying to use the css hover, and I have it working on a div by doing:
#complete-paper:hover{
background:url('/static/images/blue-aarow.jpg') no-repeat;
background-position:192px 35px;
background-color:#17aedf;
color:#ffffff;
}
my question is, is there a way to target another html element, like a totally unrelated div, when I hover over the property with the ID of complete-paper? So when you hover over the div with complete-paper, it'll do the above hover css changes, as well as change another div on the page?
Thanks
Edit: The question I had is if it's possible if the div's are unrelated. But in this case they are related, It's actually a p inside a div when you hover over the div, I want the p to also change
Not unless the other div is nested in #compete-paper where the css would look like:
#complete-paper:hover{
background:url('/static/images/blue-aarow.jpg') no-repeat;
background-position:192px 35px;
background-color:#17aedf;
color:#ffffff;
}
#complete-paper:hover .other-div{
/* different css */
}
Not unless the other div is a descendant or sibling of the hovered element.
Since you said it's a descendant, then do it like this:
#complete-paper:hover #decendant_id {
// stuff
}
While the actual HTML elements in the file must be either nested or contained in a single element to be valid ':hover' targets to each other, the css 'position' attribute can be used to display any element where ever you want. I used position:fixed to place the target of my ':hover' action where I wanted it on the user's screen regardless to its location in the HTML document.
So the element is where the browser wants it in the code, and where the user wants it on the screen.
See detailed post->
In stylesheets you often see div#id { /* something */ } and div.class { /* ... */ } but how often do you see just div { /* something */ }?
Is it a bad idea to style div tags that have no #id or .class associated with them?
It's not necessarily bad practice, as long as you're sure you want to apply this styling to every single div in your document. You can always override and / or add further down the cascading style sheet.
It all depends on your purpose.
Styling all divs to be one specific style can be overridden.
So you may want to force height on all divs, but on divs with class hidden you want display none. Finally you may want a div with id = hello to have a red background.
Next you decide that you want a div with id=foo and class = bar to be have height:200.
div {
height:100px;
}
div.hidden {
display:none;
}
div#hello {
background-color:#FF0000;
}
div#id.bar {
height:200px;
}
Well...it depends on what you want. If you want every single div tag in your markup to have the same style then it makes sense to do a tag selector instead of a class or id selector.
As you normally use divs for a bunch of different stuff, I would answer "yes".