I am building an AngularJS app. I am having the following difficulties styling the page. Here is a fiddle: https://jsfiddle.net/9ooa3wvf/
1) On hover I want to change the color of the nested li elements (Class name is nested). I have tried several different approaches, but nothing seems to work.
2) I want to vertically align the nested li elements in the center with the links About and Services. They are being aligned like so:
I want them to be aligned like so:
In the above picture, Our Team is not on the same line as About.
HTML
<div ng-show = "buttonDisplay" id = "buttonDisplayContent" class = "cssFade" >
<ul>
<li class = "normal"> Home </li>
<li class = "subLi">About
<ul class = "nested">
<li> Our Team </li>
<li> Our efforts </li>
</ul>
</li>
<li class = "nextToNested"> Blog </li>
<li class = "subLi"> Services
<ul class = "nested">
<li> Design </li>
<li> Web </li>
<li> Learn </li>
<li> Invent </li>
</ul>
</li>
<li class = "nextToNested"> Portfolio </li>
<li class = "normal"> Contact </li>
</ul>
</div>
CSS
#buttonDisplayContent ul {
list-style-type:none;
padding:0px
}
#buttonDisplayContent ul ul {
list-style-type:none;
padding:0px
}
#buttonDisplayContent ul a {
text-decoration:none;
color:#fff;
font-size:50px;
font-weight:bold
}
#buttonDisplayContent ul ul a {
text-decoration:none;
color:lightgray;
font-size:40px;
font-weight:bold
}
#buttonDisplayContent li {
margin-bottom:0.1%
}
.subLi{
margin:0px;
padding:0px;
list-style-type:none
}
.nested {
margin-left:0px;
display:inline
}
.nested li {
display:inline;
padding-bottom:6px;
padding-right:1%;
padding-left:1%;padding-top:8px
}
#buttonDisplayContent ul li:hover {
background-color:black
}
UPDATE
The following code solved the problem. I added a span on the li elements I wanted to vertically align.
<div ng-show = "buttonDisplay" id = "buttonDisplayContent" class = "cssFade" >
<ul>
<li class = "normal"> Home </li>
<li class = "subLi">About
<span>
<ul class = "nested">
<li> Our Team </li>
<li> Our efforts </li>
</ul>
</span>
</li>
<li class = "nextToNested"> Blog </li>
<li class = "subLi"> Services
<ul class = "nested">
<li> Design </li>
<li> Web </li>
<li> Learn </li>
<li> Invent </li>
</ul>
</li>
<li class = "nextToNested"> Portfolio </li>
<li class = "normal"> Contact </li>
</ul>
</div>
CSS:
#buttonDisplayContent ul {
list-style-type:none;
padding:0px
}
#buttonDisplayContent ul ul {
list-style-type:none;
padding:0px
}
#buttonDisplayContent ul a {
text-decoration:none;
color:#fff;
font-size:50px;
font-weight:bold
}
#buttonDisplayContent ul ul a {
text-decoration:none;
color:lightgray;
font-size:40px;
font-weight:bold
}
#buttonDisplayContent li {
margin-bottom:0.1%
}
span .nested li {
display:inline-block
vertical-align:middle
}
.subLi{
margin:0px;
padding:0px;
list-style-type:none
}
.nested {
margin-left:0px;
display:inline
}
.nested li {
display:inline;
padding-bottom:6px;
padding-right:1%;
padding-left:1%;padding-top:8px
}
#buttonDisplayContent ul li:hover {
background-color:black
}
Update:
There is one thing missing for perfect vertical alignment: line-height property! When not set, especially in a situation like that, with a lot of nested, inline, ULs and LIs, every browser can behave in an different way...
Here is a more clean version, trying to follow some best practices on creating a CSS:
Define default styles. I saw in your CSS You setting a bunch of times the same property and value, for the same element. All your ULs had list-style:none;, so why write 3 times the same thing? It's a lot easier write a default: ul{list-style:none} and then, if needed override this default: ul.ULThatIsVeryDifferent{list-style:circle outside none;}.
You will notice that I've set both UL and LI font-size and line-height properties together, even ULs doesn't respecting font-size. I made it because both properties are related in this scenario, so if you change the font-size for your LI, You would also change the line-height, and also, the UL's line-height. When everything is together, it's a lot easier to maintain.
In the :hover rules, You will notice that I've not used the a in the end of selector. Why it's not needed now? Because there is not any other more specific selector setting some color for our a. But only this will not make our links get colored properly. Why? Because as doesn't inherit some properties from its parents, and one of this properties is color. So, even We setting a color on LI, our link has naturally a more specific selector (defined by default by browser) setting a color. To override this behavior, You will see that in the first lines, I set some default properties for as, and one of them is color:inherit. Thus, when We change the color of our LI, our a will also get this new color.
Take a look with care in the updated JsFiddle, and how I've structured the CSS and properties.
If You have any other doubts, I'd be glad to help. Also, I'll be very happy if You think that my answer is now worthy of your upvote.
For reference, there is the last CSS proposed:
/*------- Defaults -------*/
*{
vertical-align: middle;
line-height: normal;
font-
}
ul{
list-style: none outside none;
padding: 0;
margin: 0;
}
li{
display:inline-block;
}
a{
text-decoration:none;
font-weight:bold;
color:inherit;
}
/*------- Parent List -------*/
div#buttonDisplayContent > ul,
div#buttonDisplayContent > ul > li{
font-size:34px;
line-height:34px;
}
div#buttonDisplayContent > ul > li{
display: list-item;
color:#eee;
}
div#buttonDisplayContent > ul > li:hover{
background-color:#000;
}
/*------- Nested Lists -------*/
div#buttonDisplayContent > ul > li > ul{
display: inline-block;
}
div#buttonDisplayContent > ul > li > ul,
div#buttonDisplayContent > ul > li > ul > li{
font-size: 14px;
line-height:14px;
color: #ccc;
margin: auto 10px;
}
div#buttonDisplayContent > ul > li > ul > li:hover{
color: yellow;
}
Original Answer:
1 - In your code, you set: #buttonDisplayContent ul ul a{color:lightgray;}. If We set .nested li:hover{color:yellow}, the most specific rule will be the first one, because it sets directly our a element, and also because its degree of specificity (how deep the selector goes). If We set .nested li:hover a{color:yellow;}, it also will not work, because of the degree of specificity again. Thus, We have two choices:
Use a more specific css selector: #buttonDisplayContent .nested li:hover a{color:yellow;}
Use the !important, to override any more specific css selector that doesn't use the !important too: .nested li:hover a { color: yellow !important; }.
Depending on your real situation can be a better/cleaner approach use a more specific selector, it's a good practice, but there is exceptions...
Also, Here is a great article about CSS Selector Specificity, really worth read it :) .
2 - Elements with display: inline; doesn't respect top and bottom margins and paddings, and cannot have a width and height set. (http://www.w3.org/TR/CSS21/visuren.html#inline-formatting). Thus, to make sure your settings of top and bottom paddings will be respected, but keeping the "inline behave" set display:inline-block.
From a great answer here of StackOverflow (CSS display: inline vs inline-block, and also What is the difference between display: inline and display: inline-block?):
Inline elements:
respect left & right margins and padding, but not top & bottom
cannot have a width and height set
allow other elements to sit to their left and right.
Block elements:
respect all of those
force a line break after the block element
Inline-block elements:
allow other elements to sit to their left and right
respect top & bottom margins and padding
respect height and width
Working JsFiddle here with suggested changes: https://jsfiddle.net/9ooa3wvf/18/
For first question use this,
.nested li a:hover{color:red !important;}
sorry to use !important as you already have color for that so.
For second point, can you please explain little bit more so i can update my answer and can give you solution...
Again sorry for one answer but little bit more detail and will give you answer asap..
I just added couple of lines of css and it seems to work
.nested li a:hover{
color:red !important;
}
Check this fiddle
Also add this css
ul li {
display: table-caption;
}
Related
I had to Create a working HTML/CSS for the following nestes list
root
child1
child11
child2
child21
child22
child3
child31
So for this I created the following
HTML
<ul class="list-view">
<li>
<ul><li>Chlid11</li></ul>
</li>
<li>
<ul>
<li>Chlid21</li>
<li>Chlid22</li>
</ul>
</li>
<li>
<ul>
<li>Chlid31</li>
</ul>
</li>
</ul>
Now How will I be able to apply CSS to the leaf parent and root node .
I have to make Leaf to green , parent to red and root should be like parent but with underline
Here Leaf are
Child: 11 , 21, 22 , 31
Parent: the three li
root will be :the first ul
This was a question asked to me in an Interview I am just trying to solve it
Css has to be dynamic . I mean I was not suppose to add classes directly saying what is leaf and what is root .
Something like this
Jsfiddle
UPDATE
CSS
.list-view> li:first-child{
color:red;
text-decoration: underline;
}
.list-view> li ul li {
color:red;
}
.list-view> li ul li ul li{
color:green;
}
I am not able to make just the root node underline
Thanks
I am going to take a stab in the dark, so please don't shoot me if i jumped the gun. But here is my understanding of what he is talking about.
<ul class="root">
<li class="parent">
<ul class="leaf">
<li>Chlid11</li>
</ul>
</li>
<li class="parent">
<ul class="leaf">
<li>Chlid21</li>
<li>Chlid22</li>
</ul>
</li>
<li class="parent">
<ul class="leaf">
<li>Chlid31</li>
</ul>
</li>
</ul>
CodePen for example
first of all, your markup does not make very much sense to me. Nesting ul's inside li's is not very useful when the li's do not contain any other content. I suppose your markup should look more like this:
<ul>
<li>
<span>Root</span>
<ul>
<li>Parent</li>
<li>Parent
<ul>
<li>Leaf</li>
<li>Leaf</li>
</ul>
</li>
</ul>
</li>
<li>Root</li>
</ul>
When it comes to targeting each level with css, you have a number of options. Adding classes to each level may seem the most straight forward, but it can be harder to maintain, and it is easier to make mistakes. Others have already demonstrated this technique, so I'll limit myself to a few alternatives:
option 1a:
ul { /* root + parent + leaf */ }
ul ul { /* parent + leaf */ }
ul ul ul { /* leaf */ }
option 1b:
li { /* root + parent + leaf */ }
li li { /* parent + leaf */ }
li li li { /* leaf */ }
option 2:
ul > li { /* root + parent + leaf */ }
ul > li > ul > li { /* parent + leaf */ }
ul > li > ul > li > ul > li { /* leaf */ }
That is basically it I guess, though you could come up with some variations. Option 1a and 1b are equivalent. Option 2 is more specific, and can be useful when trying to overwrite certain styles. It is considered good practice to keep your selectors as little specific as possible though. This way you can overwrite them easier later on, and your selectors do not get ridiculously long. It just keeps your code easier to read and maintain, so I would definitely go for option 1 in this case.
Note that this technique requires you to overwrite your styles. The styling you requested could ie. be achieved by doing something like this:
li {
color:red;
}
li span {
text-decoration: underline;
}
li li li {
color:green;
}
The pseudo classes you speak of in the comments (:nth-child, ...) are irrelevant here. They are meant for distinguishing between siblings, not for parent-child relations.
edit:
the text-decoration property is a bit tricky to overwrite. Have a look at the specs on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration
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.
To solve this, you have to make sure the element with the underline is not the parent of the rest of your tree. Th easiest way is to put it in a span and apply the underline only to that:
http://jsfiddle.net/r616k0ks/3/
(I have updated my code samples above accordingly)
Using some specific selectors you can create almost any selection without using classes on the child elements.
I don't know if this is what you're getting at:
/* Root */
.list-view { background: grey; }
/* First level li's */
.list-view > li { background: red; }
/* First level of ul's */
.list-view > li > ul { background: orange; }
/* Second level of li's */
.list-view > li > ul > li { background: purple; }
/* Second level of li's, first element */
.list-view ul > li:nth-child(1) { background: green; }
/* Second level of li's, all other elements */
.list-view ul > li:nth-child(1n+2) { background: blue; }
See link https://jsfiddle.net/6d3g3zLm/
If not, feel free to elaborate on your question.
Have you tried adding classes to your html?
https://jsfiddle.net/w7tx52L5/
HTML
<ul>
Root
<li class="parent">
Parent1
<ul class="child"><li>Chlid11</li></ul>
</li>
<li class="parent">
Parent2
<ul class="child">
<li>Chlid21</li>
<li>Chlid22</li>
</ul>
</li>
<li class="parent">
Parent3
<ul class="child">
<li>Chlid31</li>
</ul>
</li>
</ul>
CSS
.root {
color: red;
text-decoration: underline;
}
.parent {
text-decoration: none;
color: red;
}
.child {
color: green;
}
Edit
from your comment it appears you need to use :nth-child selectors. That wasn't clear from your original question. try this css -
ul {
color: red;
display: inline-block;
width: 100%;
text-decoration: underline;
}
ul li {
display: inline-block;
width: 100%;
text-decoration: none;
color: red;
}
ul li:nth-child(odd) > ul li:first-child {
color:green;
}
ul li:nth-child(even) > ul li {
color: green;
}
The workaround of display: inline-block and width:100% is because text-decoration affects all nested elements as well. http://www.w3.org/TR/CSS21/text.html#propdef-text-decoration
Add classes to the list elements as Geoffrey has shown in his answer. Then apply styling to the classes as you would any styling. If you don't know CSS or anything about how to style, I would suggest researching a little more before you ask these kinds of questions, as this stuff is relatively easy to learn if you put some time and effort into it. http://www.w3schools.com/css/
I am working on our company website and I'm very new to HTML and CSS. I am trying to make a drop down menu for the Nav bar and I have the gist of it, but it needs some help. The dropdowns are not lining up properly, the text is too large, and the border I have is spanning the entire length of the lists.
CSS:
.menu{
padding:0;
margin:25px 0 0 0;
}
.menu, .menu li{
list-style: none;
display: block;
float:right;
padding:12px;
border-right: 1px solid #d8d8d8;
}
.menu li{
float:left;
display: block;
width: 100px;
}
.menu ul{
opacity: 0;
}
.menu ul li{
background-color: white;
}
.menu li:hover > ul{
opacity: 1;
}
.menu li.last-menu-item{
border: none;
padding-right:0;
}
.menu a{
color:#132d3c;
font-size:15px;
font-family: 'sansationbold';
text-transform: uppercase;
text-decoration: none;
font-weight:lighter;
}
.current-menu-item a{
color:#f15c22;
}
.menu a:hover{
color:#f15c22;
}
HTML:
<ul class="menu alignright">
<li class="current-menu-item">Home</li>
<li>About
<ul>
<li>Who We Ar</li>
<li>Values</li>
<li>Owners Message</li>
<li>Infotek Blog</li>
<li>Success Stories</li>
<li>Partners</li>
</ul>
</li>
<li>Products & Solutions
<ul>
<li>Security Solutions</li>
<li>Data Solutions</li>
<li>Communication Solutions</li>
<li>Connectivity Solutions</li>
<li>Infrastructure Solutions</li>
<li>Resources</li>
</ul>
</li>
<li class="last-menu-item">Contact</li>
</ul>
Can I get a little help?
http://jsfiddle.net/pQhpu/191/
Hi in this you're making some mistakes.
Don't use opacity for hide the submenus, set it with the property display:none
Set with position:relative your li and the ul inside them with position:absolute
View this demo an make any question http://jsfiddle.net/pQhpu/214/
EDIT
To resolve your request of centering the submenus in relation with his parent you can use Jquery.
I created this function for you: Review the demo here http://jsfiddle.net/pQhpu/264/
$(document).ready (function () {
$('.menu li').mouseenter(function (){
var $this = $(this),
$sub =$(this).children('ul'),
pad = parseInt($this.css('padding-left'),10)+parseInt($this.css('padding-right'),10),
move=($this.width()+pad-$sub.width())/2;
$sub.css ('left',move+'px');
});
})
All you have to change here is the name route of your li that displays the submenu; in my case is '.menu li' . This function takes the width of the submenu and his parent and make an operation to make it centered.
For the borders, put them on the a instead of the actual li. And put your padding on the a as well to push the borders to the right. You usually have to add a class like '.last' to the last item if you don't want a floating border off to the right. Will have to make the widths larger to accommodate all the text on one line, or reduce the overall size. That should get you started.
First off, your design is horrible. I think you probably copied it from somewhere, but there are so many cross-over/overlaying elements. Define each different part(menu options, drop down options, etc.) seperately, rather than applying things to all lis and what not.
Here is a fix for the width. I made the divs larger. It was pretty hard. Next you'd have to define a class for all drop down items, and then make their font-size smaller, and apply the same width as menu items so they aren't slightly larger than the menu items.
http://jsfiddle.net/pQhpu/200/
To correct the alignment issues add:
.menu, .menu li
{
padding: 12px 0 12px 0;
}
This is shown in firebug but not in your code above
.menu, .menu li
{
padding: 12px;
}
To prevent the border from spanning the entire length of the list, use the display property instead changing the opacity.
.menu ul{
display: none;
}
.menu li:hover > ul{
display: inline;
}
I'm trying to style some unordered lists and running into problems...it isn't affecting the output!
The example I can't get to change.
<div id="footer">
<div id="foot-nav">
<ul>
<li>home</li>
<li>site map</li>
<li>three</li>
</ul>
</div>
</div>
The CSS:
#footer #foot-nav ul.blah {
list-style-type: none;
}
#footer #foot-nav ul.blah li.blah {
padding:2px 0;
}
#footer #foot-nav ul.blah li.blah a {
color:#333;
text-decoration: none;
}
#footer #foot-nav ul.blah li.blah a:hover {
text-decoration: underline;
}
Another UL from the same page
.mobile-menu #mobile-menu-links ul{
list-style-type: none;
margin:0;
padding-left:3%;
}
.mobile-menu #mobile-menu-links ul li{
padding-bottom:2px;
border-bottom:1px solid #bababa;
}
<div class="mobile-menu" id="mobile-account">
<div id="mobile-menu-links">
<h4>General:</h4>
<ul>
<li>View your profile</li>
<li>Change your settings</li>
<li>View your messages</li>
</ul>
</div>
</div>
The rules from the #mobile-menu ul is taking preference with the ul from the top of the question?
I'm obviously doing something wrong, could you help? Thanks!
http://jsfiddle.net/GgdhX/
You're using a lot of descendant selectors for IDs and needless classes on LI elements.
#foot-nav .blah{
list-style-type: none;
}
#foot-nav .blah li{
padding:2px 0;
}
#foot-nav .blah li a{
color:#333;
text-decoration: none;
}
#foot-nav .blah a:hover{
text-decoration: underline;
}
<div id="foot-nav">
<ul class="blah">
<li>home</li>
<li>site map</li>
<li>three</li>
</ul>
</div>
#footer #foot-nav ul.blah
This selector applies to <ul> elements that have the blah class, which is a descendant of an element with an ID of foot-nav, which is a descendant of an element with an ID of footer.
Aside from the last part, your HTML matches that, so I would assume that the problem is that your #foot-nav element is not within an element with an ID of footer.
You can either remove #footer from all your selectors, or you can put your #foot-nav element within an element that has an ID of footer.
Edit:
Okay, in light of the changes to the question, either there's something wrong with the CSS that is stopping it from getting applied at all, or the CSS is being overridden.
Inspect the element in a web browser's developer tools to see if the rules are showing up at all. If they are, then they are probably being overridden by rules elsewhere on the page. If that is the case, then you should be able to see where the other rules are while you are inspecting the element.
If the rules are not being applied at all, then it's likely there's something wrong with your CSS. Have you run it through a validator to check to see if there are no syntax errors? Are the rules within a media query that isn't in effect?
If you remove all the #footer aspects of the selectors you have on there, everything should work perfectly. I made a jsfiddle of the working copy. Let me know if this is the UI concept you had in mind. Also, I suggest you read up on CSS Specificity to understand how rules are prioritized when applied to different nested elements
I have a list with child elements like :
<ul>
<li>.. </li>
<li>
<ul>
<li>.. </li>
</ul>
</li>
<li></li>
</ul>
<style> li {float: left; margin-left: 10px } li ul {float: left} </style>
This is fine in Firefox, all the list elements being inline horizontally like I want.
LI LI LI LI LI
When I look in Chrome though those child elements are dropped below the main list elements like this :
LI LI LI
LI LI
I tried display: inline on all of the elements but it made no difference.
What is the best cross browser way to create a horizontal row of list elements that have nested children like this?
Here is a fiddle : http://jsfiddle.net/thirtydot/7yufQ/1/
In Firefox the numbers are screwed up from the floats and Chrome shows them as in my example above.
<style>
ul{
padding:0px;
margin:0px;
list-style-type:none;
}
li {float: left; margin-left: 10px }
li ul {float: left;}
</style>
here is an example, works fine for me in Chrome as well
http://jsfiddle.net/corotchi/8BLck/
You can make both ul and lis inline.
http://jsfiddle.net/QFjgH/
ul, li {
display: inline;
}
li { margin-left: 10px; }
The problem with your code is whitespace after the "2". I just removed it an put the <ul> next to the "2" and it works just fine in Chrome. Look http://jsfiddle.net/7yufQ/2/
I'm trying to figure out if I'm totally mis-understanding something here.
I have a menu and submenu (dropdown style using only CSS, no javascript) and for some reason the sub-menu styles (defined by .submenu li a) always shows up at the same style as the parent a (defined by #menu li a) even though the submenu CSS styles show up AFTER the top menu styles.
Am I mis-understanding CSS rules? I thought features defined LATER and at a lower level override the top level (for example, inline style will always override style.css styles). I'm attaching a screenshot off Firebug that shows crossing out the font sizes defined on line 275 in favour of styles defined at line 225, on the parent DOM objects.
My DOM looks like this to simplify it:
<ul id="menu">
<li>
about us
<ul class="submenu">
<li>
Testimonials
</li>
</ul>
</li>
<li>
listings
</li>
<li>
MLS® Search
</li>
<li>
City Guide
<ul class="submenu">
<li>
The West End
</li>
<li>
Coal Harbour
</li>
</ul>
</li>
<li>
blog
</li>
</ul>
And my CSS looks like this.
#menu li a:link, #menu li a:visited {
color:#333;
text-decoration:none;
font-size:16px;
font-weight: bold;
padding-bottom: 3px;
text-transform: uppercase;
}
#menu li a:hover {
color:#333;
background-image: url('../images/pink_dots.png');
background-position: bottom left;
background-repeat: repeat-x;
}
#menu li a:active {
position:relative;
color:#333;
}
.submenu {
position:absolute;
left: -9999px;
display: block;
background-color: #DD2D77;
padding:0px 0px 0px 0px;
margin: 0px;
top:16px;
z-index: 20;
}
#menu li:hover .submenu {
left: -5px;
}
.submenu li {
text-align: left !important;
margin:0px !important;
padding: 2px 0px 3px 0px !important;
position:relative;
display: block;
width: auto;
float: none;
text-align: left;
}
.submenu li:hover {
}
.submenu li a:link, .submenu li a:visited {
color:#fff;
text-align: left;
font-size:12px;
font-weight: normal;
margin: 0px;
white-space:nowrap;
display: block;
padding:3px 7px 5px 7px !important;
min-width: auto;
zoom: normal;
}
.submenu li a:hover, .submenu li a:active {
color:#fff !important;
background-image: none !important;
background-color: #73AA12;
}
The id selector has more specificity than your other selector.
Increase the specificity, which is favoured over !important.
Yes; you are misunderstanding how CSS works.
http://www.htmldog.com/guides/cssadvanced/specificity/
The order in which you define rules in the CSS file means nothing. The selector determines which rules apply and when.
The axiom behind CSS is - the more specific your selectors are, the more precedence they take over less specific ones.
This is how anchor styles work for instance. To show an underline only on hover:
a:hover
{
text-decoration: underline;
}
a
{
text-decoration: none;
}
Even though the less specific rule is defined later, the more specific rule (an anchor tag that is also mouse hovered) overrules the more general rule.
You're correct in saying that rules declared later in the cascade take precedence but only if they are at an equal or higher specificity.
Your first style #main li a uses an ID as the context whereas the second style .submenu li a uses a CLASS as the context. An ID holds more specificity than the CLASS, so it overrides the .submenu.
You need to read up a bit on CSS Specificity:
http://www.htmldog.com/guides/cssadvanced/specificity/
http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
http://coding.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/
http://css-tricks.com/specifics-on-css-specificity/
You could do a quick fix and declare #main > li a - which will only apply to anchors inside list items that are direct descendants of the #main element. Then, your .submenu li a rule will be applied to your submenu items.
Here is a specificity calculator that you can add as a bookmark in your browser: http://www.westciv.com/mri/
When you click it, it will open a window that you can either type a selector into, or you can click an element on the page and it will suggest the selector that you should use (showing you the path it took to get there).
It may help as a learning tool.