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;
}
Related
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;
}
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 {...})
On this answer: https://stackoverflow.com/a/1725486/2519402 to a question, it states:
It sounds like you had h1 .myClass instead of h1.myClass - there's an
important distinction:
h1 .myClass { } /* any element with class="myClass" within an <h1> */
h1.myClass { } /* any <h1> with class="myClass" */
I don't have enough points to ask my question as a comment on that answer.
So, based on what is said above, shouldn't the following code work:
<style>
h3 .h3nobtmgn {
margin-bottom:-20px;
}
</style>
<h3><strong class="h3nobtmgn">Why would I need or want this item?</strong></h3>
Yes, but vertical margin styles won't work on an inline element like <strong>. http://www.w3.org/TR/CSS21/box.html#propdef-margin-top
So your CSS selector will target the correct element but the style you applied will have no effect.
For that to work you can try:
<style>
h3 .h3nobtmgn {
display: block;
margin-bottom:-20px;
}
</style>
<h3><strong class="h3nobtmgn">Why would I need or want this item?</strong></h3>
Yes it does.
h1.myClass would change the appearance of
<h1 class="myClass">...</h1>
And h1 .myClass would change the appearance of
<h1> ... <span class="myClass">...</span></h1>
You will see through http://www.w3schools.com/cssref/trysel.asp that when you are doing div p it will select all p inside of div. So, the answer is yes.
here is a sample: https://jsfiddle.net/r5d0kkb5/
which shows selectors for div p and div .B and also div .A for your thoughts.
Code:
<div class="A">
<p >
A
</p>
<p class="B">
B
</p>
</div>
Css:
div p {
background-color: cyan;
}
div .B{
font-size: 32px;
}
div .A{
color: red;
}
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 }
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;
}