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 {...})
Related
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 have the following HTML and CSS snippet and I want the "!" not to be underlined, but it is. What am I doing wrong?
p {
color:red;
text-decoration:
underline;
font-size: 1.2em;
}
span.none {
text-decoration: none;
}
<p class="p">Click the thumb<span class="none">!</span></p>
Why does the text-decoration: none not work inside p?
tldr; When text decorations are propogated to their descendant elements they can't be undone, however in certain situations they don't get propogated to their descendants.
This exact example is documented on MDN: (emphasis mine)
Text decorations draw across descendant elements. This means that it
is not possible to disable on a descendant a text decoration that is
specified on one of its ancestors.
For example, in the markup:
<p>This text has <em>some emphasized words</em> in it.</p>,
the style rule p { text-decoration: underline; } would cause the entire paragraph to be
underlined. The style rule em { text-decoration: none; } would not
cause any change; the entire paragraph would still be underlined.
However, sometimes text decorations don't propagate to their descendant elements - see the W3C spec on 'text-decoration' property
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.
So this means that if the span element has
1) display: inline-block, or
2) is floated or
3) is abolutely positioned then
the text decorations are not propagated to it in the first place. (which also means that text-decoration: none; isn't necessary)
p {
color:red;
text-decoration:
underline;
font-size: 1.2em;
}
span.none {
display: inline-block;
}
<p class="p">Click the thumb<span class="none">!</span></p>
add display:inline-block; to span.none class
p {
color:red;
text-decoration:
underline;
font-size: 1.2em;
}
span.none {
text-decoration: none;
display:inline-block;
}
<p class="p">Click the thumb<span class="none">!</span></p>
Quick Fix, but ugly one, But do the trick. hope some one else come up with better answer.
p {
color:red;
text-decoration: underline;
font-size: 1.2em;
}
p {
display: inline
}
p.none {
text-decoration: none;
}
<p class="p">Click the thumb</p><p class="none">!</p>
I've got this html element :
<span class="item-menu-notif non-lue" onclick="dosomething(2150)">
TEXT
</span>
Here's CSS classes :
.item-menu-notif{
display: block;
cursor: pointer;
padding: 0 0.4em 0 0.4em;
}
span.item-menu-notif:hover{
background: #aaaaaa;
}
span.item-menu-notif .non-lue{
font-weight: bold;
}
My problem is that the non-lue class is not use. In firebug I can see that the class doesn't appear on my span element.
I can't understand why. I tried with and without span selector on my CSS. It's the same result.
Remove the space between the selectors:
span.item-menu-notif.non-lue
You only use space if you want to target elements who are descendants. But since you want to target the element with both classes, you have to remove that space between them.
It's because of the
span.item-menu-notif .non-lue{
font-weight: bold;
}
With this you tell to the browser, "find for me an element with the class
'.non-lue' that is into a span element with the class name 'item-menu-notif'".
For specifying a more explicit rule for an element, like in your case, where you want a span element that is an 'item-menu-notif' and a 'non-lue' you should provide the class names without whitespace between them (with a whitespace character between selectors it is assumed that the right most is a descentant of the left side selector).
Please check out these links, hope they will help you:
The first one is about selectors and the second & third are about specificity rules.
1) http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
2) https://css-tricks.com/specifics-on-css-specificity/
3) https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
And of course the right answer is:
span.item-menu-notif.non-lue{
font-weight: bold;
}
This selector says that an element with a class of .non-lue inside your span will be styled, instead of the span element.
span.item-menu-notif .non-lue{ font-weight: bold; }
Remove the space and it will go from saying .non-lue inside the span to span with .item-menu-notif AND .non-lue.
span.item-menu-notif.non-lue{ font-weight: bold; }
You should do this
span.item-menu-notif.non-lue{
font-weight: bold;
}
My html and css files are set up correctly, however I'm having trouble with a certain selector.
I have the html here:
<span id="bottom_nav_bar">
Link 1
</span>
And the CSS here:
a#bottom_nav_bar{ color: red; text-align: center; }
However, my span is not getting selected and I can't figure out why. Any ideas?
It should instead be:
#bottom_bar_nav a {
color: red;
text-align: center;
}
As the <a> is a descendant of the <span> with the ID bottom_nav_bar
You're not targeting the a element. Your CSS selector is attempting to style an a element with an id of "bottom_nav_bar". In your HTML, however, the span has this ID and the anchor element is within the span.
To target the anchor tag, change your CSS selector to:
#bottom_nav_bar a { color: red; text-align: center; }
To target just the span, change a#bottom_nav_bar to span#bottom_nav_bar.
For more information about selectors, please see http://www.w3.org/TR/css3-selectors/#selectors
try this:
#bottom_nav_bar a{ color: red; text-align: center; }
use this to select the span link
span #bottom_nav_bar a{ color: red; text-align: center; }
Your link don't have this id, so it can't work...
Put your id to the a-tag ;)
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 }