i have this CSS code:
h1 {
font-size:22px;
color:#341C12;
font-weight:normal;
font-style:italic;
}
.h1color h1{
color:#862E06;
}
and this HTML Code
<h1>News <span class="h1color">& events</span></h1>
but its not working. want i want to do is have the first h1 text to be color #341C12 and the other text to #862E06 with using only 1 h1 tag..
This:
.h1color h1{
Should be:
h1 .h1color {
The order is parent child, if you always just have 1 span, you could also leave out the class, and do:
h1 span {
The descendant selector .h1color h1 selects all h1 elements that are descendants of an element with the class h1color. But you need all elements with the class h1color that are descendants of an h1 element.
So just change the order of the selectors:
h1 .h1color {
color: #862E06;
}
Related
I'd just like to know the difference, when using Sass, between simple nesting
p{
color: white;
.text{
text-decoration: underline;
}
}
and nesting using an Ampersand '&'
p{
color: white;
&.text{
text-decoration: underline;
}
}
The first example without the ampersand will select every child of a p element with the class text. The example with the ampersand will select every p element with the class text. With your code, using the first selector will make every p element with a child that has the text class have an underline. However, the second selector will make every p element with the text class underlined.
As per your questions:
1.
p {
color: white;
.text {
text-decoration: underline;
}
It indicates: CSS properties output to all the .text class selector inside p tag. Like p .text{}
2.
p{
color: white;
&.text{
text-decoration: underline;
}
}
It indicates: When you use & with .text selector the CSS properties output to all the .text class selectors within p tag. Like p.text{}
Good luck buddy!
In the first one the .text has to be a child element of p (in CSS that would be p .text {...}) , in the second one the .text rule applies to all p tags that have the text class (i.e. p.text {...})
This may seem like a really simple question that can be answered by Google, but I have been struggling to figure this out for a while. Say you have an HTML code like this:
<p> text 1 </p>
<div class = "divone">
<p> text 2 </p>
<h1> text 3 </h1>
</div>
and if I have CSS setup like this:
.divone h1, p{
color: yellow;
}
It seems to change the p element outside of the div element. What can I do to select the elements inside a div so that it only changes the p inside the div "divone"?
, separates rules, so you must repeat .divone:
.divone h1,
.divone p {
color: yellow;
}
You can use some CSS preprocessor like LESS or SASS to nest rules:
.divone {
h1,
p {
color: yellow;
}
}
but it will compile to same CSS rules.
Your current rule .divone h1, p says apply for h1 that is inside .divone or any p element on page
p element's parent is not specified, so you should do one of this things:
.divone h1
.divone p {
color: yellow
}
or you can use ">" symbol, which effects direct children of element
.divone > h1
.divone > p {
color: yellow
}
.divone h1, .divone p{
color: yellow;
}
to select immediate children of a specified element. and avoid deeper nesting, use immediate selector ">"
.divone > h1, .divone > p {
color: yellow;
}
otherwise for selecting all children of parent element use
.divone h1, .divone p {
color: yellow;
}
On my side, i want all links in texts etc to be red.
All headlines should be black.
AND All linking headlines should be black as well.
Problem: As soon as I set ...
a:link {color:#d11112; text-decoration: none;}
...all my linking headlines turn red as well.
How do I keep them black?
Here is my headline css:
h2 { font-size:18px; line-height:23px; color:#000000; padding:0px; font-weight:bold; text-align:center; text-transform: uppercase; }
You might want to add
h2 a { color:000000; }
somewhere after
a:link {color:#d11112; text-decoration: none;}
Also, lose the :link, as suggested in the comments.
Just so you're aware, when you do a:link this is setting the color for an unvisited link.
You need to set the color for the a element inside of your h2 tags.
So you need to change it to:
h2 a { font-size:18px; line-height:23px; color:#000000; padding:0px; font-weight:bold; text-align:center; text-transform: uppercase; }
One thing you can try is an attribute selector. This lets you select only elements based on the value of a specific attribute or attributes. Therefore, to select only <a> elements you're using as anchors, you could try something that selects <a>s with an id but not a href, or something like that.
For instance, you could have this rule:
a:not([href]) {
color: black;
}
However, it wouldn't be compatible with IE 6 (then again, what is?)
CSS works in a nested way, so assuming your <a> tags are within the <h2>, that is:
<h2>
...
</h2>
it'll apply first the <h2> styles and then the <a> styles, so you end up with red links. However, you can make it apply the h2 CSS to those links as well by using CSS selectors instead of just the h2 tags, for example:
h2, h2 > a {[your style here]}
where h2 > a means <a> tags nested within an <h2>.
What's the use of the css selector body h1 instead of simply h1? can there be h1 tags anywhere else than within body?
body h1 has higher specificity (docs) than just h1.
That's the only difference (in a valid html page at least).
In practice, there's no difference other than the specificity of the selector you're using.
h1 {} will select all h1 elements.
body h1 will still select all h1 elements, but only those inside a body tag (which of course, they should always be).
If you have h1 { color:red } and body h1 { color:blue } then the higher specificity, blue, will supercede red.
This is more useful when you're dealing with nested DOM elements. E.g. ul li h1 { color:green }
My understanding is that using element.class should allow for a specific element assigned to a class to receive different "styling" than the rest of the class. This is not a question about whether this should be used or not, but rather I'm trying to understand how this selector is intended to work. From looking at a ton of examples on the internet, I believe the syntax is correct and do not understand why this is not working.
Here is an example:
CSS:
h2 {
color: red;
}
.myClass {
color: green;
}
h2.myClass {
color: blue;
}
HTML:
<h2>This header should be RED to match the h2 element selector</h2>
<div class="myClass">
<h1>This header should be GREEN to match the class selector</h1>
<h2>This header should be BLUE to match the element.class selector</h2>
</div>
It should be this way:
h2.myClass looks for h2 with class myClass. But you actually want to apply style for h2 inside .myClass so you can use descendant selector .myClass h2.
h2 {
color: red;
}
.myClass {
color: green;
}
.myClass h2 {
color: blue;
}
Demo
This ref will give you some basic idea about the selectors and have a look at descendant selectors
h2.myClass refers to all h2 with class="myClass".
.myClass h2 refers to all h2 that are children of (i.e. nested in) elements with class="myClass".
If you want the h2 in your HTML to appear blue, change the CSS to the following:
.myClass h2 {
color: blue;
}
If you want to be able to reference that h2 by a class rather than its tag, you should leave the CSS as it is and give the h2 a class in the HTML:
<h2 class="myClass">This header should be BLUE to match the element.class selector</h2>
The element.class selector is for styling situations such as this:
<span class="large"> </span>
<p class="large"> </p>
.large {
font-size:150%; font-weight:bold;
}
p.large {
color:blue;
}
Both your span and p will be assigned the font-size and font-weight from .large, but the color blue will only be assigned to p.
As others have pointed out, what you're working with is descendant selectors.
h2.myClass is only valid for h2 elements which got the class myClass directly assigned.
Your want to note it like this:
.myClass h2
Which selects all children of myClass which have the tagname h2
The CSS :first-child selector allows you to target an element that is the first child element within its parent.
element:first-child { style_properties }
table:first-child { style_properties }