This is how the code looks:
And I want to a border for the highlighted element, i.e. <div class="Comment">...</div>, how do I style it using CSS?
NOTE: Notice the class named 'Comment'? It is used in both the highlighted element and it's parent element. So, that's probably why this one's a bit tricky?
I tried the CSS codes below, and some others, and none worked.
.DataList .Item .comment, .DataList .Comment .comment,
.DataList .FirstComment .comment, .DataList .Mine .comment {
border:1px solid #666;
padding:10px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
.DataList .Item div.comment, .DataList .Comment div.comment,
.DataList .FirstComment div.comment, .DataList .Mine div.comment {
border:1px solid #666;
padding:10px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
What am I doing wrong? Hope someone can help me solve this small riddle. Thanks.
first, try NOT styling with extreme specificity (adding parent/element selectors). this way, you can just use .Comment - note that they ARE case sensitive.
if styles are overridden or you have selectors of the same name but different "context" (like you have a list item with .Comment and it's child with div with .Comment), that's when you use higher specificity (adding the parent/element in the selector) like div.Comment, .Item .Comment
Related
I guess the answer to this may be simple, but I can't figure it out on my own.
I've got the following HTML:
<div id="excerpt">
<p class="chapter">Chapter One</p>
<p>Text</p>
<div class="copyright-notice">
<p>Copyright © 2014 Name. All rights reserved.</p>
</div>
<!--end copyright-notice-->
</div>
<!--end excerpt-->
and the following CSS to go with it:
#excerpt {
padding:20px;
color:#000000;
}
#excerpt p {
line-height:1.4em;
text-indent:45px;
text-align:justify;
}
p.chapter {
text-align:center;
text-indent:0;
font-size:16pt;
text-transform:uppercase;
}
.copyright-notice {
border-bottom: 1px solid #999999;
border-top: 1px solid #999999;
margin:20px auto;
padding:20px;
}
.copyright-notice p {
display: block;
color:#666666;
text-align: center;
text-indent:0;
}
JS Fiddle reproduction.
As you can see I try to center the text and set the indent to 0 for the paragraph with the chapter class as well as the text within the copyright notice. But it doesn't work.
If I apply the style to the paragraph directly in the HTML file like:
<p style="text-align:center;text-indent:0;">text</p>
JS Fiddle reproduction.
It'll work. But as soon as I try to style those paragraphs through CSS text-align and text-indent get ignored.
Any idea what I'm doing wrong? Thanks for your help!
This is just a specificity issue.
The selector #excerpt p is more specific than p.chapter. Therefore text-indent:0 isn't applied. The reason it was applied when using the style attribute, is because inline CSS is more specific.
More specifically, (pun intended), #excerpt p has a specificity calculation of 101. Whereas p.chapter has a specificity of 11. (An id is 100 points, a class is 10, and an element is 1).
As for a solution, use either of the following to avoid the specifity conflict.
p {
text-indent:45px;
}
p.chapter {
text-indent:0;
}
or..
#excerpt p {
text-indent:45px;
}
#excerpt p.chapter {
text-indent:0;
}
(Other styling omitted from brevity.)
The latter example is probably what you should go with because you don't want all paragraph elements to be indented, just those that are a descendant of #excerpt. I'd avoid using id's in CSS as much as possible though - save those for JS.
<div class='checked' id='rb01'></div>
<div class='rb' id='rb02'></div>
<div class='rb' id='rb03'></div>
<div class='rb' id='rb04'></div>
css
.rb{
display:inline-block;
width:12px;
height:12px;
background-color:#ffffff;
border-radius:50%;
margin:0 5px;
cursor:pointer;
}
.rb:hover {
background-color:#B30000;
border:2px solid #ffffff;
}
.checked{
display:inline-block;
width:12px;
height:12px;
border-radius:50%;
margin:0 5px;
cursor:pointer;
background-color:#B30000;
border:2px solid #ffffff;
}
So hovering a .rb div it becomes red and it works.
But, how can I make that, when hovering a .rb div, any div which is .checked - becomes non-red, i.e. - .rb ?
Using jquery, you may try something like;
$( ".rb" ).mouseover(function() {
$(".checked").css('background-color', 'blue');
}).mouseout(function() {
$(".checked").css('background-color', 'red');
});
Here is a working demo.
As the .rb and the .checked containers are not nested nor related, what you are looking for is probably some javascript solution.
jQuery provides a .hover() method that you can use to achieve your goal with just a few lines (say, on hover for .rb element you can add an extra CSS class for the .checked div, and provided you define non-red styles for this .checked.new-class in your css, you'll have it made :)
you can give css like this
.rb:not(.checked):hover { do css here}
I have this piece of code, that it refuses to work without the !important (which I never want to use, because I know there is always a way to do without it).
The interesting thing is that the CSS line is after everything else (and as far as I know, this should overwrite the other stuff)
live demo jsFiddle
HTML Structure:
<div id="body">
<div class="box">
<p>...</p>
</div>
<p>...</p>
</div>
CSS:
#body{
padding:18px 35px;
}
#body p{
margin-bottom:18px;
}
.box{
background:#ddd;
border:1px solid #000;
padding:5px;
}
.box p{
margin:0;/*works with !important*/
}
It's because the ID of #body p is a more specific selector than the class of .box p. The important simply overrides that cascade.
Matching p with #body has higher specificity than matching p with .box. Read the specificity section of the CSS spec for help. Try
#header .box p { margin: 0; }
The space between #header and .box is important.
Your #body p has a greater specificity value. You can read more on generally how specificity values are calculated here.
<style>
.btn{
display: inline-block;
padding: 15px 10px;
background: gray;
}
.btn:hover{
background:lightgray;
color:red;
}
</style>
<div class="btn">
text
</div>
works nicely. However if we have that:
<div class="btn">
text
</div>
it wouldn't work exactly as the first one. The anchor's text wouldn't be affected. Okay what if we add to the CSS:
.btn a:hover{
background:lightgray;
color:red;
}
That will work, but only if you hover exactly on the anchor, but still hover on the div rectangle wouldn't affect the anchor's text.
How can I tweak that without any javascript, so both rectangles acted identically?
http://jsfiddle.net/vaNJD/
UPD: adding !important keyword wouldn't help
Because all web browsers set a default color (and text-decoration) for a elements, you need a more specific selector to override the default. Try this instead:
.btn:hover, .btn:hover a {
background:lightgray;
color:red;
}
If you really want the two boxes to be identical, you would also need to override the un-hovered button as well:
.btn a {
color: black;
text-decoration: none;
}
It may also be worth pointing out that IE6 only supports the :hover pseudo-class on a elements. You may want to work around this by setting the a to display: block and adding the background color there.
You can accomplish the same effect by getting rid of the container and applying the .btn class directly to the a element. See the third box in this updated fiddle: http://jsfiddle.net/mlms13/vaNJD/5/
.btn:hover{
background:lightgray;
color:red;
}
.btn:hover a{
color: red;
}
Change to:
.btn:hover,
.btn:hover a{
background:lightgray;
color:red;
}
http://jsfiddle.net/vaNJD/4/
Like this?
.btn:hover a{
color:red;
}
I found one way in which you should set height for div tag and use it again for anchor tag and set anchor's display properties as block
for example
<style>
.divest
{
height:120px;
}
.divest a
{
display:block;
height:120px;
}
</style>
<div class="divest">here is hyperlink text</div>
I have a link, where I want to change the color of the text away from the color that I set for hyperlinks. My code is:
<span class="button"><%= link_to "Create new scenario", :action => "create" %></span>
And my CSS is:
a:link {
color:rgb(50%, 15%, 5%);
text-decoration:none;
}
.button {
-moz-border-radius-bottomleft:6px;
-moz-border-radius-bottomright:6px;
-moz-border-radius-topleft:6px;
-moz-border-radius-topright:6px;
background-color:rgb(93%, 93%, 93%);
border:1px solid black;
color:black !important;
line-height:1.9;
margin:0 3px 3px 0;
padding:4px 8px 4px 3px;
text-decoration:none;
}
For some reason the hyperlink text is still brown, rgb(50%, 15%, 5%).
Change your css to use the .button class and anchors with a parent css class of .button. as shown below:
.button,.button a:link {
-moz-border-radius-bottomleft:6px;
-moz-border-radius-bottomright:6px;
-moz-border-radius-topleft:6px;
-moz-border-radius-topright:6px;
background-color:rgb(93%, 93%, 93%);
border:1px solid black;
color:black !important;
line-height:1.9;
margin:0 3px 3px 0;
padding:4px 8px 4px 3px;
text-decoration:none;
}
EDIT: Keep in mind that this causes the border to repeat and makes the hyperlink show up without an underline because of text-decoration:none. The best practice in this case is to have a separate css declarations.
.button {....}
.button a:link {.....}
I think it's because of the specificity; the span (.button) is less specific to the link than the a:link so the a:link styles are being applied (correctly according to the spec: http://www.w3.org/TR/CSS2/cascade.html).
If you want to override the a:link styles for this one button (or...well, any other in the same way) add the class to the <a> tag rather than its parent element.
Though you might get away with:
.button > a:link {/* styles */}
Which should become specific since this one <a> is the descendant of the the span of class .button.
Edit:
It's worth pointing out that the '>' selector applies only to immediate descendants, so an a inside an element of class .button would be affected, however an a inside a div in turn inside an element of class .button would not be affected.
Also this selector is not supported by IE (certainly below version 7, and I don't know about version 7 -or, indeed, version 8). It might be okay to use, instead, the '*' operator:
.button * a:link {/* styles */}
bearing in mind that while this is supported -I think- in IE after version 5.x at least, it's a little broad in that it will target all as within an element of class .button, regardless of any interim elements, and will still likely be less-specific than any rule applied to a:links.
You could make a css style .button a:link {color: black;}
"! important" is not for forcing child's style. It's for the user to override styles assigned by webpage author. It has no use in your case.
The proper way to do it is:
.button {
-moz-border-radius-bottomleft:6px;
-moz-border-radius-bottomright:6px;
-moz-border-radius-topleft:6px;
-moz-border-radius-topright:6px;
background-color:rgb(93%, 93%, 93%);
border:1px solid black;
color:black;
line-height:1.9;
margin:0 3px 3px 0;
padding:4px 8px 4px 3px;
text-decoration:none;
}
.button a {
color:black;
}
Remarks:
".button > a" is a good idea but it won't work in IE6. Therefore one should use ".button a" here to be safe.
Putting ".button" and ".button a" together in one set of style will make the button border repeat itself.