I've got a jquery slider function on a page, and when the slide rotates I need the style of a LI tag to change.
So when the slider goes onto a li the class looks like this:
<li class="first sliderkit-selected">
And when it moves off it looks like this:
<li class="first">
But when the class goes to "first sliderkit-selected" I need it to be referenced from the style sheet but not sure how it is constructed, so far I've played around with:
li.sliderkit-selected li.first {
background-color: red;
}
But it doesn't seem to pick it up.
I know you could use a comma inbetween each class, but I want a style to be referenced exclusively when those two class's are together, if that makes any sense.
Thanks.
You're looking for li.sliderit-selected.first:
li.sliderkit-selected.first{
background-color: red;
}
See also:
CSS Selectors Level 3: Class selectors
The following rule matches any P element whose class attribute has been assigned a list of whitespace-separated values that includes both pastoral and marine:
p.pastoral.marine { color: green }
This rule matches when class="pastoral blue aqua marine" but does not match for class="pastoral blue".
To select a DOM element with multiple classes, concatenate the classes in the selector:
li.sliderkit-selected.first {
background-color: red;
}
If you want to select an element with multiple classes, you simply append the classes with a dot, like this:
li.first.sliderkit-selected { /* your rules */ }
This means "a li tag with the class first and the class sliderkit-selected".
You can write like this:
.sliderkit-selected.first {
background-color: red;
}
OR
.first.sliderkit-selected {
background-color: red;
}
Related
In a page I have an HTML element
<span class="ysf-game-status ">
<a class="F-reset" href="http://sports.yahoo.com/nfl/miami-dolphins-washington-redskins-20150913028/" target="sports" onclick="pop(this)">Sun 10:00 am # Mia</a>
</span>
How would I change the text color of the Sun 10:00 am # Mia text?
I tried
.ysf-game-status > .F-reset {
color: blue;
}
but that did not work. However, I created a jsFiddle and it seems to work there. What am I doing wrong?
Here is a link to an example page I am trying to modify. I want to change the text below the player name to a different color.
The color is set by a rule with the selector #Stencil .F-reset. As this is more specific than the selector that you use, it takes precedence.
You need a selector that is as specific and comes after that rule, or a selector that is more specific. You can use the more specific selector:
#Stencil .ysf-game-status > .F-reset {
color: blue;
}
Try
#Stencil .F-reset{
color:blue;
}
The ID is more specific. Unless you target that, it is being overwritten.
Try this, it will work
#Stencil .F-reset {
color:blue !important;
}
Use just this:
.F-reset {
color: blue;
}
I think you dont need more than that. But if you use this class more than once and you want this specific just use like this :
.F-reset {
color: blue !impotant;
}
I recently encountered a.. "thing" in the land of SASS. And maybe you guys know a trick or something alike to "fix" it.
I've got this class .icon. It contains some basic styling for my icons (Used for an iconfont). These icons can then be placed in the markup whereever I want. For example in a button. But inside the button this icon needs some extra styling. So I do the following:
.icon {
// Basic styling
}
button {
.icon {
// Additional styling
}
}
It compiles to this css:
.icon {
// Basic styling
}
button .icon {
// Additional styling
}
Everything OK so far. But now I want to extend the .icon to an after-element inside of all my .foo elements like so:
.foo:after {
#extend .icon;
}
Now it compiles to this css:
.icon, .foo:after { // This is good, exactly what I want
// Basic styling
}
button .icon, button .foo:after { // But I don't need the second half of this line
// Basic Additional
}
Now the foo-element isn't just extending the "root" icon-class but also the icon-class under button and all its additional stylings. But I don't need that. I don't want that element to have that additional styling. It doesn't result in problems yet. But maybe that could happen later. So I was curious if it is possible to extend only the .icon from the root, omitting the nested .icon in the button, and possibly more nested icon-classes in other elements later on.
My first thought was to use an abstact class like %icon and extend from that, but the above mentioned icon-class, and the file that it is placed in, is generated by grunt-webfont. So I can't just change the icon-class styling 'cause its overwritten all the time.
What can I do? Is there some more to the extend function of SASS that I don't know of? Or is there a totally different way?
Thanks for any help.
SOLUTION:
Using all the awesome help and tips I found a way to avoid this problem:
Grunt-Webfont suggests to use the i-tag to display the icons. Font-Awesome does the same. So, I'm doing exactly that. And I usually don't use it for anything else.
This allows it to use the i-tag under the button for my extra styling, and not the .icon class. This way the .icon class is used only once in the generated file and then never again.
.icon {
// Basic styling
}
button {
i { // <= Previously '.icon'
// Additional styling
}
}
Have you tried doing something like this?
.icon {
//some styles from external (ie: grunt webfont)
color: red;
}
%icon {
#extend .icon;
}
button {
.ico {
#extend %icon;
//add some additional styles
}
}
.foo:after {
#extend %icon;
//add some more
}
You would then avoid generating the foo:after rule for the .icon inside the button.
EDIT2 - you'll need to create an additional class which you can use inside your styles, so there's only one .icon class defined (in your grunt-webfont generated css). Then just use the .ico class inside your styles and extend the %icon placeholder like shown above.
EDIT - have you considered solving this problem in your grunt-webfont generator?
From the documentation, it seems you can set the output to scss like so:
options: {
stylesheet: 'scss',
mixinPrefix: 'mixin-'
Then just use the mixin to define the styles of your desired classes?
I think this gets the result you're looking for? Albeit, slightly messily.
The method: make a placeholder style and extend that into .icon to begin with.
%icon-styles{
basic: styling;
}
.icon {
#extend %icon-styles;
}
.foo:after {
#extend %icon-styles;
}
button .icon {
#extend %icon-styles;
additional: styling;
}
It compiles into:
.icon, .foo:after, button .icon {
basic: styling;
}
button .icon {
additional: styling;
}
You can also use custom template with grunt-webfont. It’ll give you much more control on generated CSS.
I am getting started with learning CSS.
While looking through the tutorial on w3schools.
I realized some of the example start with
.awesome-text-box{}
Is there a different between
.awesome-text-box {} and awesome-text-box{}
without the dot?
What does the dot notation means here
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
p referes to ?
A dot in css is for what is called a class.
They can be called almost anything, for example in your CSS you would create a class and add style for it (in this case, I'm making the background black);
.my-first-class {
background-color: #000;
...
}
and to apply this class to an HTML element, you would do the following
<body class="my-first-class">
...
</body>
this would mean the body of the page would become black.
Now, you can create classes for CSS style or you can reference HTML elements directly, for example (CSS again);
body {
background-color: #000;
}
would directly reference the <body> element on the page and do the same again.
The main difference between the two is that CSS classes are reusable. By comparison, referencing the HTML tag directly will affect all tags on the page (that are the same), for example (CSS again);
body {
background-color: #000;
}
.my-first-class {
background-color: #FFF;
}
and now for some HTML;
<body>
<p class="my-first-class">This is the first line</p>
<p class="my-first-class">This is the second line</p>
</body>
This would produce a black page, with 2 white boxes with text inside them (try it out!)
Now for your last part of the question about p.one {...} CSS.
This is a reference to a <p> tag that has class="one" added to it, <p class="one">...</p>
That CSS will only work on a <p> tag with the one class added (as above).
Extra for experts...
There is also one more selector type and it's called an ID (and I personally do not use these when doing CSS styling but some people like too and I don't know why...)
Much like a class, you can have an id on an HTML element; <p id="my-first-id"></p>
and to add CSS style to this, you would put (in the CSS);
#my-first-id {
...
}
and that would style all elements with that id added.
Hopefully that helped answer all the parts, ask again if you need an even better explanation :)
The dot denotes that the selector is a class. So it will select elements in your page as such:
.awesome-text-box {
}
<div class="awesome-text-box"></div>
Whereas without the dot denotes an element name. Such as:
div {
}
<div></div>
In the other example you gave, the dot notation is using chaining this is where you can select an element with numerous conditions. In your example:
p.one {
}
// Will find
<p class="one"></p>
// However it will not find
<div class="one"></div>
Whilst I am here I can give you a list of other common selectors too:
#awesome-text-box => <div id="awesome-text-box"></div> => ID
.btn.btn-style-1 => <span class="btn btn-style-1"></span> => Chaining classes
p > span => <p><span></span></p> => Child
p span => <p><a><span></span></a><span></span> => Descendant (anything below)
p + span => <p></p><span></span> => Sibling
A '.' refers to a class, while a '#' refers to a id.
When neither a '.' or a '#' are used, the CSS will apply the style to an HTML object.
So for p .one and p .two, the CSS will be applied to the '.one' and '.two' classes that exists within the 'p' object.
For a more detailed example;
<p class = "one">This text will have the CSS of "p .one"</p>
<p class = "two">This text will have the CSS of "p .two"</p>
. means a class. You can call that CSS class with HTML
example
<span class="awesome-text-box"> ABCD </span>
and P means <p> tag in HTML you can call
<p class="one"> ABCD </p>
Ref -
http://www.w3schools.com/css/css_selectors.asp
The dot notation is for class and without dot that would not work. The selector name like div, p don't need dot notation. And use hash (#) for the selector with id.
Ex-
<div id="foo">foo bar</div>
<div class="bar">foo bar</div>
#foo{} /* selects foo with id foo */
.bar{} /* selects foo with class bar */
div{} /* selects the div */
Here . is class selector. It means apply style to all elements which has class awesome-text-box ie,
<div class="awesome-text-box"></div>
while without dot it is tag name like you mention in second example p Here p is tag:
<p>Some text</p>
Similarly p.one apply the style to all p tags which has class one. ie,
<p class="one">Some text</p>
I have a list of <div>s. Each <div> has class zebra. Until now I've used the following to stripe the list:
.zebra:nth-child(2n) { /* colors */ }
Now I'm implementing a filtering feature, such that some of these <div>s will have a class hidden. I tried updating my css to
.zebra:not(.hidden):nth-child(2n) { /* colors */ }
But that had no effect. What am I missing? How can I combine these selectors so that only the showing .zebra <div>s are considered in the :nth-child(2n)?
Here's a fiddle of what I'm describing.
UPDATE:
there is an unknown number of .hidden elements, and an unknown total number of elements. (the list is data-driven, not static).
I'd really rather not do any of:
run a javascript every time a filter control is touched, just to re-color the showing list items.
remove an element entirely when it's hiding. this makes re-adding it non-trivial (afaict).
Instead of removing the element as Justin suggested, you could replace it with an element of a different tag. We could use details, for example:
var placemarker = document.createElement("details");
node.parentNode.replaceChild(placemarker, node);
placemarker.appendChild(node);
Then, instead of using :nth-child, use :nth-of-type.
details { display:none; }
div.zebra:nth-of-type(2n) { /* colors */ }
Unhiding the element can then be done with:
placemarker.parentNode.replaceChild(placemarker.firstChild);
See this static example.
if you don't mind delving into jquery..
$('#yourHiddenElement').remove();
will remove it so that your css shades alternate.
http://jsfiddle.net/NYvcv/1/
I would suggest using this instead of applying the class 'hidden' to the element you want to hide.
If you know there will be a limited number of .hidden items, you can do something like this:
.zebra2:nth-child(2n) {
background: lightgrey;
}
.zebra2.hidden ~ .zebra2:nth-child(2n) {
background: inherit;
}
.zebra2.hidden ~ .zebra2:nth-child(2n+1) {
background: lightgrey;
}
.zebra2.hidden ~ .zebra2.hidden ~ .zebra2:nth-child(2n) {
background: lightgrey;
}
.zebra2.hidden ~ .zebra2.hidden ~ .zebra2:nth-child(2n+1) {
background: inherit;
}
And so on. This particular example breaks if there are more than 2 hidden items.
One possible solution:
use jQuery to change the .hidden element's type to, say, <li>. Use :nth-of-type instead of :nth-child.
http://jsfiddle.net/Nb68T/1/
This is probably a case of trying to run before I can walk, however... I have the following code:
<div class="hidden" id="repair_complete">
// some code
</div>
I was under the impression that if my CSS file contained:
#hidden {
display: none;
}
... then the div content wouldn't display. However, it seems to only adopt this behaviour if the CSS file contains a reference to the div id:
#repair_complete {
display: none;
}
In a book I'm working through the opposite seems to be true - the style sheet refers to the class name, not the id.
Any ideas where I'm going wrong?!
Your CSS syntax is incorrect.
If you want to access this div, you can do it like this:
/* By class: */
.hidden {
display: none;
}
/* By ID: */
#repair_complete {
display: none;
}
Note that to access an element by class you use a dot before the class name. You use a hash before the ID.
The other answers have the technical stuff right: you need .hidden, not #hidden.
Now you have to decide whether you want to attach CSS to divs by class or id. I find classes are better in the long run, unless you are really certain that there will ever really and truly be one of the thing you are making.
Also, don't forget that you can attach more than one class to an element:
<div class="red fat shallow">blah blah</div>
Then you can style this element with any of these selectors:
.red {...}
.fat {...}
.shallow {...}
.red.fat {...} /* Applies only to things that are both red and fat */
.red.fat.shallow {...} /* Very specific */
/* etc. */
A "." before the name will refer to classes, and a "#" will refer to ids:
.hidden
{
display: none;
}
You need:
.hidden{
display:none;
}
period is a class specifier, pound sign is for id's.
To use class name use the dot.
i.e.
.hidden refers to the class name
#repair_complete refers to the id.
To refer to an element's ID you use the # selector, to refer to it's class name you use the . selector.
So in your example you would use
#repair_complete {
display:none;
}
or
.hidden {
display:none;
}