How and why does this work? - html

This guy Motyar from India from the website: http://motyar.blogspot.no/2011/02/handling-onclick-event-with-css.html
showed a very nice pure css method to hide and show divs. However I can't seem to understand it. Here is the code and please explain this to me, to a newbie.
THE HTML (NOT MY CODE):
<div id="lightbox">
Hide me<br />
Hi!! <br />
i am the lighbox
</div>
<a href="#lightbox" >Show the lighbox</a>
THE CSS (NOT MY CODE):
#lightbox {
display:none;
}
/* works with IE8+, Firefox 2+, Safari, Chrome, Opera 10+ */
#lightbox:target {
display:block;
}
Please explain this to me comprehensively. Thank you :)

In CSS, the :target placed after a CSS token, say for example, #lightbox means that the inner code of your rule #lightbox:target will be evaluated if and only if the URL of your page is appended with #lightbox such as for example, http://www.stackoverflow.com/#lightbox. In this case the following code will be evaluated by the browser :
#lightbox:target { display:block; }

As of the W3 Selectors Level 3 Recommendation:
Example:
p.note:target
This selector represents a p element of class note that is the target element of the referring URI.
So, as you click on #lightbox, the lightbox-Element becomes the target of your URI.
The pseudo-selector can identify this and applies the proper styling.

The key is :target pseudo selector. It qualifies to active anchors (#lightbox in this case).
You can read more about this here: http://css-tricks.com/on-target/

Related

CSS styles get applied without class declaration

Now, this is a new one ... I have a class declaration in SCSS:
.video {
a {
// some stuff
}
}
There are the classes: wrap - container - row - content and then some html:
<div class="btn-large">
View more
</div>
This 'a' has the styles from '.video a' applied, but in the whole source, there's no mention of 'video'. I checked the compiled css and it's '.video a'. The rule also shows up as applied in Safari (and Chrome, and Firefox). How's that possible?
There is no way for the styles to be applied if the selector doesn't match.
You have ruled out the class appearing in the source.
Therefore, it is being added to some element using JavaScript.

Is there a way to set the CSS of the parent of an element?

Is there a way to declare a CSS declaration that targets the parent of an element by id?
For example, I know the ID of my element, "element1" but I don't know the id of it's parent. I want to declare CSS information to target myDiv but I won't know it's ID.
HTML:
<div id="myDiv">
<div id="element1"> hello </div>
</div>
CSS:
#element1(parent) {
border:1px solid red;
}
No, right now there isn't. There's been talk of this in the WHATWG groups and the like for a long time, but until a year or two ago the browser vendors refused to support any proposals for such selectors because it would slow down CSS rule matching too much due to the way the DOM is parsed.
With advancements in DOM parser engines it is currently considered possible from the browser vendor end, and as such there is a proposal now to include some kind of target selector in CSS4, with even the syntax still under debate. Right now, there's no browser that supports any of the proposed notations, nor is any one of them even ready internally to support such feature.
The current CSS4 Selectors draft mentions the subject specifier, but even contains an explicit note right now that it's undecided whether, if this proposal holds, the ! should be prepended or appended to the selector, or if there should even be 2 of them.
You can do it with jquery, if you're not limited to just css:
$(document).ready(function(){
$("#element1").closest("div").css({"({"border":"1px solid red"});
});
For multiple parents use parents() and for the the closest one use closest(). Closest() is great because it only gest the first parent that matches you selection.
if you know the parent element it's a div:
div > #element1{
border:1px solid red;
}
but if you don't know what tag is parent of your element, read the whole thing first before using this code:
* > #element1{
border:1px solid red;
}
This reads as: all elements that are the direct descendant (which can only be one) of the element with id 'myDiv'.
There are some browser compatibility issues, but according to this post the guy says that it is compatible with IE 7, IE8, IE9 pr3, FF 3.0, FF 3.5, FF 3.6, FF 4b1, Saf 4.0 Win, Saf 5.0 Win, Chrome 4, Chrome 5, Opera 10.10, Opera 10.53 and Opera 10.60.
But the really bad thing about this code is that it might bring performance issues (although I didn't test) because you are forcing the browser to go through all the elements of the page (which can be extensive).
Now, if you want to be a good css coder and avoid these you should think the other way around, just like everybody else does, for instance, applying classes or id to the parent element(s). If you can't reach them then check if it is possible to insert a new div in your structure wrapping your #element1 element and being the parent of that element or even use javascript.
Not with vanilla css. You could try scss, less or some other dynamic css generation language.
You need nested declarations and parent selector support.
Here is an example that works in both scss and less:
#element1 {
#myDiv & { border: 1px solid red; }
}
Some references:
Referencing parent (SCSS)
Nested rules (LESS)

Checkbox CSS rule doesn't apply in Internet Explorer 9

My code for changing background of checkbox:
.question11 input[type=checkbox] + label {
display: block;
height: 16px;
padding-left: 25px;
background: url(images/bg.gif) top left no-repeat;
}
The problem is it's not working with Internet Explorer 9.0.4.
The CSS selector is too complex for IE. The easy solution is to give a class or id to the checkbox and the label if you can change the HTML.
<input type="checkbox" class="foo"><label class="foo">...</label>
.question11 .foo {
...
}
Juhana is right.
The other problem is, you can't style checkboxes 100% individual via CSS only.
There are great plugins for it, so you can completely replace the checkboxes etc. via images.
--> Uniform - sexy forms with jQuery for example.
The rule does not set any properties on any checkbox. It only applies to label elements in a specific context, and that’s how it works, on IE 9 and other browsers.
If you would like a rule to apply to any checkbox element that is immediately followed by a label element (as I guess), then you would need a different kind of selector—something that does not seem to exist in the CSS Selectors Level 4 draft, still less as supported. So you would need to add some markup, like class attributes for checkboxes.
Try like this
.chh {
background-image: url(images/checkbox_bg.gif);}
if(document.getElementById(id+ii).checked==true){
document.getElementById(id+ii).className==chh;
}
First write css then apply javascript function

CSS class not being applied at all in IE7-8

<!DOCTYPE html> has been set, and html5shim.js has been included in the <head> of each page.
I have the CSS:
.height_fix_container > * { margin:0; background:#fff url(../images/bg.jpg) top left no-repeat; min-height: 400px; }
.height_fix_container > *:first-child { background:#fff; } /*Good eye! But the problem still exists*/
...being applied to this code in the middle of the page:
...
<div class="height_fix_container">
<div>Content box 1</div>
<div>Content box 2</div>
</div>
...
In every browser other than IE7 and 8, the CSS selectors work great. However, in IE Content box 1 recognizes the selector but Content box 2 completely ignores it. I'm checking this with the built in Developer Tools in IE.
Why might this be happening?
In IE you need to have a DOCTYPE declared in order for it to recognize the first-child selector.
<!DOCTYPE .......>
You're also missing a # infront of the 'fff' in the second class definition. It doesn't affect the code at all, just a syntactical edit.
http://www.w3schools.com/cssref/sel_firstchild.asp
IE7 is very particular with :first-child and might be choking on the * before it.
Perhaps you can add another style to the sheet:
.height_fix_container > div:first-child { background:#fff; }
Untested
Your page is being displayed in Quirks Mode. Your description and CSS is making me quite certain.
The most likely cause is that you don't have a valid doctype as the very first line. Add this:
<!DOCTYPE html>
If you do already have a doctype, there are other things can cause Quirks Mode.
Once you fix this, background:fff will no longer work. You need background:#fff. The # is important.
http://jsfiddle.net/a256R/ - similar selectors - work in IE7 and IE8 (first div is green, second is red). Problem is somewhere else (background image url, other rules etc.).

Style HTML element based on its title using CSS

Is it possible to apply a style to an HTML element using only its title as a unique identifier? For example:
<div class="my_class">
My Link
</div>
I would like to write a rule that will apply only to link element within a div of class my_class and the link title MyTitle.
I do not have the ability to change page layout, however, I can use a custom CSS file that is included automatically.
Thank you
It sure is, using what's called attribute selectors; these are part of CSS2. In your particular case, you'd use:
div.my_class a[title="MyTitle"] { color: red; }
You can read more about attribute selectors here: http://www.w3.org/TR/CSS2/selector.html#attribute-selectors
Yes you can:
http://www.w3.org/TR/CSS2/selector.html#attribute-selectors
You would say A[title="MyTitle] I believe.
What you are looking for is css attribute selectors:
http://www.w3.org/TR/CSS2/selector.html#attribute-selectors
a[title]
{
...
}
CSS specifications identify a number of "selectors" that may help you here. For example, you could apply a rule such as the following:
.my_class a[title="MyTitle"]
{
...
}
You can see a detailed specification of CSS "selectors" here:
http://www.w3.org/TR/2001/CR-css3-selectors-20011113/
Although it is possible, using attribute selectors (see http://www.w3.org/TR/CSS2/selector.html#attribute-selectors ) Internet Explorer 6 does not support it (see http://kimblim.dk/css-tests/selectors/ )
An example from the W3C site: H1[title] { color: blue; }