I am trying to simplify my CSS and can't get my head around why I can't apply styles to different element types with the same class.
For example, the below will only style all the .forum elements navy, but the other more specific styles are ignored. Is there a way around this?
EDIT http://jsfiddle.net/fWvxs/
HTML
<h1 class="forum">Forum Header</h1>
<p class="forum">Forum Content</p>
<small class="forum">Small deets</small>
CSS
.forum {
color: navy;
}
.forum h1 {
text-decoration: underline;
}
.forum small {
font-size: 2em;
}
Try this:
.forum {
color: navy;
}
h1.forum {
text-decoration: underline;
}
small.forum {
font-size: 2em;
}
Note that you used the wrong selector, .forum h1 means selecting the h1 which is one descendant of the .forum while h1.forum means selecting the h1 element having class forum.
it should be like this
h1.forum {
text-decoration: underline;
}
.forum h1 { //this applies to a h1 inside the .forum class element
text-decoration: underline;
}
this should work
.forum {
color: navy;
}
h1.forum {
text-decoration: underline;
}
small.forum {
font-size: 2em;
}
You have problem in Css Style,
Correct CSS is:
.forum {
color: navy;
}
h1.forum {
text-decoration: underline;
}
small.forum {
font-size: 2em;
}
It depends also what you want to achieve. In case you want to have define a forum style. You better add the class for example to the div instead of each element individually. You would otherwise repeatedly adding the class forum to each element.
<div class="forum">
<h1>Forum Header</h1>
<p>Forum Content</p>
<small>Small deets</small>
</div>
.forum {/* PUT HERE THE FORUM DEFAULT STYLES WHICH ARE COMMON LIKE IE. COLOR, FONT-SIZE */}
.forum h1 {/* PUT HERE H1 FORUM STYLES WHICH ARE SPECIFIC -THESE WILL BE OVERRIDDEN IF DECLARED in .forum {} */}
.forum p {/* PUT HERE P FORUM STYLES WHICH ARE SPECIFIC -THESE WILL BE OVERRIDDEN IF DECLARED in .forum {} */}
.forum small {/* PUT HERE SMALL FORUM STYLES WHICH ARE SPECIFIC -THESE WILL BE OVERRIDDEN IF DECLARED in .forum {} */}
On the other hand if you need to apply a forum style to an individual element like a p and not the other elements you add the class to the element directly.
<div>
<h1>Forum Header</h1>
<p class="forum">Forum Content</p>
<small>Small deets</small>
</div>
p.forum {}
Related
I'm trying to style all a tags that are not inside of a p tag. Here's what I'm thinking:
p {
font-size: 1.25rem
}
a {
color: blue;
text-decoration: underline;
}
:not(p) a {
font-size: .75rem;
}
<div>
<p>There is a <a>link</a> inside this paragraph</p>
<a>Regular Link</a>
</div>
How can I fix this? Can you not use the :not() selector without a tag in front of it? (no js/jQuery solutions please)
JsFiddle
Why not style all a tags, then apply different styles to all a tags inside p tags?
p {
font-size: 1.25rem
}
a { /* 1 */
color: blue;
text-decoration: underline;
font-size: .75em;
}
p a { /* 2 */
color: green;
text-decoration: none;
font-size: 2rem;
}
<div>
<p>There is a <a>link</a> inside this paragraph</p>
<a>Regular Link</a>
</div>
Notes:
This selector targets all anchor tags in the document
This selector overrides the first selector due to higher specificity, targeting only anchor tags in paragraph elements.
just use this for a inside the p:
p a {
//*Your style there*/
}
and this for a outside p
a {
//*Your style there*/
}
I define a css file my_style.css and use it in my page.
body {
background-color: linen;
}
.myClass1 a:link,
a:visited {
color: orange;
margin-left: 40px;
}
.myClass2 a:link,
a:visited {
color: green;
margin-left: 40px;
}
<html>
<head>
<link href="my_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<a class="myClass1" href="http://www.youtube.com">Link1</a>
<a class="myClass2" href="http://www.youtube.com">Link2</a>
</body>
</html>
Why are both links green?
Both links are green because:
.myClass2 a:link,a:visited { /* foo */ }
reads as:
.myClass2 a:link { /* foo */ }
a:visited { /* foo */ }
and not as:
.myClass2 a:link { /* foo */ }
.myClass2 a:visited { /* foo */ }
You need to put the full selector in each part of the group.
.myClass2 a:link,
.myClass2 a:visited { /* foo */ }
Additionally, since the links themselves are members of the class, you don't want the descendant combinator in there.
a.myClass2:link,
a.myClass2:visited { /* foo */ }
You forgot the class selectors before the a:visited selectors
a.myClass1:link, a.myClass1:visited{
color: orange;
margin-left: 40px;
}
a.myClass2:link, a.myClass2:visited{
color: green;
margin-left: 40px;
}
You are applying stiles to a:visited, two times. The first time you're setting color: orange, the second one color: green.
Obviously both links are already visited since both are the same.
CSS stands for "cascading style sheets", that essentially means that the last properties override the first ones.
Your confusion might be in regards of how the , (comma) works. It means that the styles are to be applied to both selectors (what's before and what's after the comma).
Also, on your CSS the classes are applied to a parent of the a tag instead to the a tag itself. Here's an approach to a solution (since I don't know what you're trying to achieve:
/* this will apply to all <a> tags with class myClass1 */
a.myClass1 {
color: orange;
}
/* this will apply to all <a> tags with class myClass2 AND to all visited a tags even if they are of class myClass1 */
a.myClass2,
a:visited {
color: green;
}
/* This is so you don't write the same twice (DRY principle) */
a.myClass1,
a.myClass2 {
margin-left: 40px;
}
Essentially on your posted HTML, both links will be green. If you change one of them to a page you haven't visited, it will be orange.
your current css of:
.myClass1 a:link,
a:visited {
color: orange;
margin-left: 40px;
}
.myClass2 a:link,
a:visited {
color: green;
margin-left: 40px;
}
reads as the following:
for myClass1's descendant a anchor tag that hasn't been visited (link), and for a anchor tag that has been visited make text color orange and make its left margin 40px.
then for myClass2's descendant a anchor tag that hasn't been visited, and for a anchor tag that has been visited, make the text color green and make its left margin 40px;
as the others have said before, the , a:visited css is changing all the anchor tags to green because css applies its styles top down and green is the last reference of the element type.
you have to reference the full selector. that being said, the previous answers include the descendant selectors (which will not work) since the anchor element is the same as the class element. therefore something like this is what you're looking for
body
{
background-color: linen;
}
a.myClass1:link, a.myClass1:visited{
color: orange;
margin-left: 40px;
}
a.myClass2:link, a.myClass2:visited{
color: green;
margin-left: 40px;
}
<a class = "myClass1" href = "http://www.youtube.com">Link1</a>
<a class = "myClass2" href = "http://www.youtube.com">Link2</a>
by not leaving the space between a and .Class1, the css denotes that they are the same element (versus the space in between them denoting descendant of)
hope this helps
This is very simple but it just came up on me; and, I can't believe there is nothing I can do about text-decoration inheritance.
I understand that if there is a <div> everything in there has to be underlined. But for a nested <div> with a separate class or id to take on the inheritance even if (none) is selected?!? I don't buy it. This happens with text-style as well, but not color.
#hello {
font-weight: bold;
}
#me {
text-decoration: underline;
color: #cc33cc;
}
.home {
text-decoration: none !important;
color: black;
}
<p id="hello">hello</p>
<div id="me">me
<div class="home">go</div>
</div>
You can position .home absolutely to prevent the text decoration from applying:
#hello {
font-weight: bold;
}
#me {
text-decoration: underline;
color: #cc33cc;
}
.home {
position: absolute;
color: black;
}
<p id="hello">hello</p>
<div id="me">me
<div class="home">go</div>
</div>
From the CSS2.1 spec:
Note that text decorations are not propagated to floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.
You can also float it or display it as an inline-block, but doing so will place the element next to the text in the parent element rather than below it as with a block-level element. Absolutely positioning (without offsetting) will not move the element.
Since absolutely positioning an element takes it out of the flow (which is why it prevents parent text decorations from applying), this means if there are any other in-flow elements after .home that need to be aware of its position, you will need to style those accordingly. For example, the next element needs to have a top margin that is equal to its height, or something along those lines.
Just replace your styles with below CSS Code.
.home {
color: black;
display: inline-block;
}
You should try to add Combinators in css
#home {
text-decoration: underline;
color: #cc33cc;
float:Right;
}
.noDecoration, #home ~ p {
text-decoration: none;
color: black;
}
You have to write your hmtl something like this
<div id="home">
<p>Home-1</p>
</div>
<div id="home .noDecoration">
<p>Home-2</p>
</div>
I hope this will solve your problem
You can use > * select all the elements inside #me,
#me > * {
text-decoration: underline;
color: #cc33cc;
}
I am trying to create a pure CSS hover effect on a block of text. This is the html..
<p class="background-switch">Ok, <span style="color:red;">now that</span> you've done that, hover me next!</p>
and the CSS..
.background-switch {
text-align: center;
padding: 1em;
max-width: 250px;
font-size: 2.2em;
border-radius: 30px;
background-color: pink;
}
.background-switch:hover {
background-color: lightblue;
color: white ;
}
It works fine without the <span> in the <p> tag..but the thing is I need the color of the "now that" to be red before hovering, and white when hovering. This is not the case as the red refuses to turn white when hovering. Is there a way to make the class property applicable to the <span> too?
Because you have:
<span style="color:red;">
Which is an inline style, it's not getting over-ridden.
The best way to fix this is to move that inline style to the CSS
.background-switch span {color:red;}
.background-switch:hover span {color:#fff;}
Or if you want to keep the inline style, then add !important in your CSS, so that the rule overrides the inline rule.
JSFiddle Demo
Add a class to your span
<p class="background-switch">Ok, <span class="random-class">now that</span> you've done that, hover me next!</p>
Then in your css :
.background-switch {
text-align: center;
padding: 1em;
max-width: 250px;
font-size: 2.2em;
border-radius: 30px;
background-color: pink;
}
.random-class {
color:red;
}
.background-switch:hover,
.background-switch:hover .random-class {
background-color: lightblue;
color: white ;
}
Try
.background-switch:hover span {
color: inherit !important;
}
You need !important to overwrite the inline styling on the span tag. Best would be if you replaced the inline styling with a class instead, this would remove the need for !important.
Your code does not work because of the selector precedence in CSS. Inline styles trump everything else. So:
<span style="color: red;"> ignores other styles.
Adding a class to your span will fix this:
<span class="something">
Remove the style="color:red;" from your span, and then add the following to your CSS:
.background-switch span {
color:red;
}
.background-switch:hover span {
color:white;
}
.background-switch span {color: red;}
.background-switch:hover span {color: #fff;}
Remove inline style from span
Adding something like this could help
.background-switch > span { color:red; }
.background-switch:hover > span { color:white; }
and remove the style inline style="color:red;
I am trying to create a banner for my site without using an image. However, that banner is also a link.
Is there a way for me to override the use of the "a" (link) CSS styling from my div?
Assume the CSS looks like this:
a:link, a:visited {
color: #176093;
}
#logo {
color: red;
font-size: 48px;
}
In other words, I'd like the CSS definitions for #logo to override the definitions for links.
Converting comments to answer:
Using this, you can specify styles within a given container:
#logo a {
color: red;
/* ... */
}
If you only want to apply your styles to the anchor within the div #logo, you have to use a selector like this:
#logo a {
color: red;
font-size: 48px;
}
If the HTML is like this;
<div id="logo">Banner Text</div>
then use CSS
#logo a:link, #logo a:visited{color:#176093;}
If HTML is like this
<a id="logo" href="#">Banner Text</a>
Then use CSS
#logo:link, #logo:visited{color:#176093;}
Your issue is the specificity of your selectors :link and :visited, you should override those as well:
#logo {
font-size: 48px;
}
#logo:link, #logo:visited {
color: red;
}