I have an ID that I need to modify via an extension called Stylus (Chrome). Basically, I need it to display nothing, as the website uses an element I do not want to see. In any case, when I place:
#7821s3s693453355sdb487326acb {display: none !important}
It still displays it. I also tried removing the class. I was wondering, is it possible that certain elements like buttons (which this one is specifically) still be displayed, regardless of whether or not we want it displayed or not?
I tried removing other things for testing, and those worked. Just not THAT specific one. I dunno if it's because the ID is extremely long, or something else I'm not seeing.
Try:
*[id="7821s3s693453355sdb487326acb"] {display: none !important}
Related
I have a weird issue. I am using the Bones theme in Wordpress, and simply trying to put a style on my home page menu.
The site is h*Xp://www.advanceditsolutions.net/nearitest/
The CSS I’m trying to use is this:
.home ul#menu-pages {
display: -webkit-box;
}
I have it in both of the media query sections, min-width:481, and min-width:768. I’ve also tried it outside of the media query scope, no luck. I can’t figure out why it doesn’t get picked up though. I inspect it on the site, and nowhere do I see the display CSS.
What sucks is, the placement is fine is most browsers, but Chrome it's all jacked up.
:: scratches head ::
1) First of all, you're using vendor prefix -webkit- that will work just on specific browser(s).
2) Check if the value is correct. Here is the list of all possible values for display property. Are you sure that -webkit-box is a correct value that can be applied to display?
Maybe instead of telling that the CSS you want to apply, doesn't work, share the larger context, a screenshot and tell us exactly what you want to achieve.
3) Do you use some developer tools, like Chrome Dev Tools, Firebug or something similar to apply and test styles? It's handy and can save you bunch of time trying to figure out what's wrong...
I can see it is working within the min-width:768 media query. You only have it included once in the stylesheet though from what i can see.
Two critical issues here are:
1) This css will only target the home page because you've used '.home' as part of your selector.
2) You've used the '-webkit' vendor prefix so it'll only work in browsers that run on that engine and support that property. I would recommend against this. You are probably better off using a flex display type.
My goals:
Generate a single HTML document with all my output so that it can be copied as a single unit.
Have multiple "pages" within that document that display different parts of the data.
Let the browser's back button do the Right Thing, and support deep-linking.
This is relatively easy to do using the :target pseudo-class to show only the page that I'm looking at (div {display: none} :target {display: block}).
I would like to add two refinements:
A navigation bar that highlights the current page's name.
A main page that appears when there is no fragment identifier (the thing after the #) in the URL.
I have created a solution using empty divs and sibling selectors. The target element (the element whose ID is in the URL fragment identifier) is an empty div, target, and then my CSS says #target1 ~ #page1 { ... } #target1 ~ #link1 { ... }. For a full example see this Fiddle; note that after clicking on the links in the nav bar, the back and forwards browser buttons work as one might reasonably expect (I don't think it's possible to demonstrate deep-linking using jsfiddle).
There are three drawbacks to this solution:
There is a separate selector in my CSS for each page, which can become unwieldy if there are many pages.
The back button works on Chrome and Firefox, but Edge doesn't seem to like this (I haven't tested it anywhere else). My understanding is that the spec is unclear regarding :target and the back button (see also this Webkit bug).
As the question's title says, it feels like I'm abusing... something.
My question is, is there a better way to do what I'm trying to do? I have a slight preference for no JavaScript (mainly because that makes deep-linking more obviously correct).
#Seika85 linked (in a comment) to Navigo, a Javascript router that seems built to do exactly this. I have updated the fiddle to use that instead, which eliminates all the drawbacks I mentioned, at the (minor) expense of having to use (a small bit of) Javascript. Thanks!
new Navigo(null, false)
.on(/target(.)/, function(x) {
$('.active').removeClass('active');
$('#page'+x).addClass('active');
$('#link'+x).addClass('active');
})
Is there a way to see exactly which declaration is affecting an element. Rather than looking at a million properties in the Firebug inspector, where depending on how many classes something is assigned may contain a lot of declarations that are lower precedence and therefore not applied. It can get lengthy to find which particular declaration is in fact affecting your element. I see long ignored declarations like this:
ul {
color: green;
}
"Computed style" will show you the end result of all the hierarchies, but not where the style derives from. Maybe I'm missing something simple. Thanks much!
JSBIN
Edit:
I've heard that I should be able to expand attributes in the Computed tag, however I don't see where that option is available. I can see that the font-size is 13.333px, but no option to see where that's coming from.
Yes, in Firebug select the element and then click on the 'Computed' tab (when viewing the HTML frame). Here you will see a list of CSS properties than can be expanded to show the location of the relevant CSS.
The Computed side panel can give you this info.
Note that it just shows the CSS trace - i.e. the styles that are affecting a specific CSS property - for those properties, which are actually changed by the CSS rules of your stylesheet. Though it can display all computed values for an element. To hide the unchanged ones you can uncheck the option Show User Agent CSS.
Also please ensure that you have a current version of Firefox installed (current stable is 20.0.1). Firebug internally uses some APIs for the style tracing, which are just available on newer versions of Firefox.
In Chrome DevTools there is 'computed style' panel which shows you the list of styles for an element property and their locations. For example see the screenshot for text-decoration property.
First, thanks so much for your time in advance.
I work for a higher ed institution in Philadelphia. We're trying to utilize the nth-child pseudoclass to make every other row in our tables gray.
The line of code I've written in our Styles.css files is
table.oddrows tr:nth-child(2n+3) {background-color: #eeeeee;}
I used 2n+3 because the first row of the table will be a darker gray than every other row because it will be a header, so I want it to start applying the background color to the 3rd row, and then every two rows after that (i.e. 3,5,7, etc.)
We use Ektron's CMS (version 8.01 SP1), and for whatever reason, the class just won't show up in the available class list, and when I try to apply it manually (i.e. manually putting <table class="oddrows" width="500"><tbody> in the body of the code) it STILL doesn't work.
I've cleared my cache on several occasions, and am still drawing a blank. (I'm using IE 8, for the record)
Any ideas? Everything I've read says my syntax is correct, and I'm about ready to tear my hair out.
Thanks again for your time!
The nth-child selector isn't supported in IE8. For IE, it's only available in 9 and up.
In order to get something like that to work, you may have to stray from pure CSS, and use some jQuery. If you're already using jQUery for other things in the site, this is a no-brainer, as it would only be adding a couple lines to your document ready statement like so:
jQuery(document).ready(function() {
$('.oddrows tr:nth-child(2n+3)).addClass("darker");
});
You would also then have a CSS class of .darker:
.darker {background-color:#eee}
Now if you're not already using jQuery (or don't have the option), this obviously won't work.
i want to build a site with a log in, Registration, ect forms. what im wondering is there a way to pass a variable into the css file some like width:20em; but instead of the 20 i want a variable that can change with each form so the felidset looks right?
Several ways you could go about this, really, but I'd go with the following:
Give each form a special class or id (Rails will often auto-generate classes/ids on form tags - I find it annoying, but it might be convenient in your case), and then, in your stylesheets, you can use rules like:
#login-form input {width: 14em;}
.signup-form input {width: 20em;}
/* And so forth... */
Other methods would involve adding style information to every text input you create (set a #input_style variable in your action, use it (explicitly) where needed - seems like a lot of work compared to the above, though) or using JavaScript to add the styles after the page has loaded (prone to cause re-render flicker, though, and adding CSS with JS just feels tacky).
So basically, there are a bunch of ways to do this, but I'd recommend CSS and drill-down. Less typing for you, and the browsers take care of everything. Hope this helps!
Two popular solutions for cleaning up CSS are Sass and LESS.