I'm using #acts h3, p to select only the H3's and P's inside of the div (id=acts). But it's also selecting P and h3 tags outside of the 'acts' div?
Yet it works just fine when I select them one at a time, like this
#acts h3
{
color: red;
}
#acts p {
color: red;
}
but not when I try to select them at once, what's the issue?
In CSS, every comma works as beginning with a complete new selector, and not in the way you expect it to work.
This means that your selector #acts h3, p selects both #acts h3 & p, the latter targeting all p elements.
Instead your selector should look like this:
#acts h3, #acts p {
color: red;
}
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;
}
I am trying to customise my wordpress theme and have given a column a class of
betting-tips-column.
I'm trying to change the p & h4 tags from white to black within this column using:
.betting-tips-column h4, p, body p{
color:black!important;
border-radius:8px;
}
However, it's affecting the whole page, not just the text within the column.
Any help?
Try this:
.betting-tips-column h4,
.betting-tips-column p {
color: black !important;
border-radius: 8px;
}
You have to basically nest all child elements inside their parents and further separate them by commas.
If you don't do the same then the css will be applied to all the p tags throughout your document.
Change it to the following:
.betting-tips-column h4, .betting-tips-column p {
color: black!important;
border-radius: 8px;
}
To style <p> and <h4> tags in a container with class .betting-tips-column you can use the following CSS code:
.betting-tips-column h4,
.betting-tips-column p {
color:black!important;
border-radius:8px;
}
Why your CSS doesn't work?
You only prefix the <h4> tag with your column class .betting-tips-column.
You defined the following rules:
p matches all <p> tags on the whole site.
body p matches all <p> tags in all <body> tags (should be only one <body> tag).
.betting-tips-column h4 matches all <h4> tags in container with class .betting-tips-column
Hint: The rule p and body p makes no sense because they affect both nearly the same <p> tags.
I'm having problems with my CSS markup, I want multiple h tags to have the same property in one class, I thought it was correct to write:
.text-right h1, h2, h3 {
text-align:right;
}
I.E, I want h1, h2, h3 to be nested in .text-right, so when the parent container has the class text-right, any h tag in it will be right aligned.
Your code should be:
.text-right h1, .text-right h2, .text-right h3 {
text-align:right;
}
I have been working on this website for awhile, I have run into a few problems but many of them were just small mess ups.
Now I just can not figure out what is going on here.
http://goo.gl/oEuoU5
If you look at the top text that says "Start Growing Your Business Today", you can see it has some padding.
Now if you look at in with the element inspector, you can see that the style comes from this CSS
.home #pricing h1, h2, h3 {
padding: 1em;
}
But the problem is, that header is not in the #pricing section. So I cannot understand why it is being styled.
I have tried a few things like
#pricing h1, h2, h3 {
padding: 1em;
}
or
.pricing h1, h2, h3 {
padding: 1em;
}
but nothing seems to work. I have even tried seeing if I messed up in the document flow but I cannot find any problems.
Any help would be greatly appreciated.
#pricing h1, #pricing h2, #pricing h3 {
padding: 1em;
}
This should do the trick. When seperating classnames by a coma, make sure to specify all subclasses / parentclasses.
The element is therefore styled because after the first coma you only specified h2 and h3 so it styles all appearances in DOM.
You are getting this undesired styling because you are not using the correct syntax for styling multiple items within the same elements.
This will produce what you are trying to achieve:
#pricing .home h1,
#pricing .home h2,
#pricing .home h3{
padding: 1em;
}
The way you have have it, you are styling h1 within the element with id = "pricing", then h2 and h3 within the whole document.