I'm pretty new to react-js or css and i want to hide a css object.
This is the code
I tried to hide (make it unclickable) the object with this code
.react-aria9431256528-7
{
display: none;
}
but this only works temporary. Every time i load the site, the id changes. How can i reference this object in way that it will always work? I was thinking about the aria-label since it is constant but how to i reference it?
Is there a better way than just to hide it?
If the aria-label attribute is unique, you can use the attribute selector syntax ([attr="value"]) as follows:
[aria-label="Help"] {
display: none;
}
Help
You can use this for example.
a[id^="react-"] {
display: none;
}
a[id^="react-"] {
display: none;
}
<div>
<a id="react-area1">1</a>
<a id="react-area1">2</a>
<a id="react-area1">3</a>
<a id="area1">4</a>
</div>
Is it the link (a href='...') that you're trying to hide? You could use the aria-label as already said. Here is another solution :
I've noticed that there is a parent div with a class "dropddown". You could target your link with css like below:
.dropddown > a {
display:none;
}
That should do it normally. If not add the important flag :
.dropddown > a {
display:none !important;
}
PS, don't forget to fix the naming of the class dropddown by the way (one d) => "dropdown". That makes me believe that you have control over it ;).
Related
I am working on a web application, and i have a div with ID = WebPartWPQ2 .I define the following css rule to define its min-width:-
#WebPartWPQ2 {
min-width:1280px;
}
currently this will apply to all the Divs that have this ID. but currently i have the following div :-
<div id="WebPartWPQ2" class="ms-wpContentDivSpace " style="" allowexport="false" allowdelete="false" allowremove="false" width="100%" haspers="false" webpartid2="e5a46e55-7c76-4d8c-be2c-e3022b7080fc" webpartid="e8865b18-0e92-4276-9945-9091e47e7b0f">
which have the associated ID and a class named "ms-wpcontentDivSpace" , so how i can exclude this Dic that have this class from my above css rule ?
#WebPartWPQ2.ms-wpContentDivSpace {
min-width: 0; /*fallback*/
min-width: initial;
}
You could also change your declaration to this:
#WebPartWPQ2:not(.ms-wpContentDivSpace) {
min-width:1280px;
}
I personally think the first one is easier to read.
In the first place, it is not right to have several elements in the same document sharing the same ID. If you decide to give an ID to an element, it must be unique.
If you want to differenciate groups of elements, classes are intended for that.
ID stands for identifier, which means that it must be unique. Use class instead of id, if you intend to use the same rule at more tags at the same page and do not duplicate ids.
.WebPartWPQ2:not(.exception) {
min-width:1280px;
}
<div class="ms-wpContentDivSpace WebPartWPQ2 exception" style="" allowexport="false" allowdelete="false" allowremove="false" width="100%" haspers="false" webpartid2="e5a46e55-7c76-4d8c-be2c-e3022b7080fc" webpartid="e8865b18-0e92-4276-9945-9091e47e7b0f">
the :not() selector would be useful, as others have already mentioned. It has good support in modern browsers, but not IE8.
If you needed an IE8-friendly solution,first declare the rule that is true most of the time:
#WebPartWPQ2 {
min-width:1280px;
}
Then declare a rule that overrides the first with a higher specificity:
#WebPartWPQ2.ms-wpContentDivSpace {
min-width: initial;
}
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 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;
}