<div id="quicklinks">
<div class="sidenav-header">
<h3>Quick Links</h3>
</div>
Link One
Link Two
</div>
In the above code I have two links. It seems to address the style of the second link in this code block I am having to target the 3rd element. My CSS is addressing the <a> tag though
#quicklinks {
height:120px;
}
#quicklinks a {
display:block;
color:#fff;
text-align:left;
background:#92d050;
margin:6px 12px;
padding:10px 12px;
text-decoration:none;
border-radius:3px;
font-weight:normal;
}
#quicklinks a:nth-child(3) {
background:#ff9900;
}
Why is my nth-child set to #3 to effect the 2nd a element?
nth-child(3) is selecting the third child element of any type, including your <div class="sidenav-header"> element. You should use a:nth-of-type(2) to select the 2nd child element of type a
Related
Is it possible to give a particular styling to a child element only if say odd number of child elements are present? Let me elaborate.
I have a
<ul>
tag which gets dynamically populated with data as
<li>
child nodes. I want to apply a styling to the last element, say if only 3 child nodes are present or there are odd numbers. My present requirement is only for three child nodes. I know it is possible to do it easily with JavaScript, but I need a pure CSS solution.
You can combine :nth-last-child() and :nth-child()
li:nth-last-child(1):nth-child(odd) {
background-color: red;
}
li:nth-last-child(1):nth-child(odd) {
background-color: red;
}
<ul>
<li>x</li>
<li>x</li>
<li>x</li>
</ul>
vs
li:nth-last-child(1):nth-child(odd) {
background-color: red;
}
<ul>
<li>x</li>
<li>x</li>
<li>x</li>
<li>x</li>
</ul>
You can achieve this by combining the :last-child pseudo-class with the :nth-child selector.
To select the last element only when a specific number of elements are present, use that number for :nth-child:
*{color:#fff;font-family:sans-serif;font-size:14px;list-style:none;margin:0;padding:0;}
li{
background:#000;
height:20px;
line-height:20px;
margin:2px;
padding:0 2px;
}
li:last-child:nth-child(3){
background:#f00;
}
hr{margin:10px 2px;}
<ul><li></li><li></li><li>I'm red</li></ul>
<hr>
<ul><li></li><li></li><li></li><li>I'm not</li></ul>
To select the last element only when an odd number of elements are present, use odd for :nth-child:
*{color:#fff;font-family:sans-serif;font-size:14px;list-style:none;margin:0;padding:0;}
li{
background:#000;
height:20px;
line-height:20px;
margin:2px;
padding:0 2px;
}
li:last-child:nth-child(odd){
background:#f00;
}
hr{margin:10px 2px;}
<ul><li></li><li></li><li>I'm red</li></ul>
<hr>
<ul><li></li><li></li><li></li><li>I'm not</li></ul>
I am implementing a close button on an element containing text with CSS. The close button is generated content from a pseudo element with content:'X';. I need the cursor to become a pointer on that "X" so I used :
cursor:pointer;
It works fine in Chrome and Firefox but it doesn't seem to work in Internet Explorer (testing on IE11 windows 7).
DEMO (test in IE)
I also tried with cursor:hand; but it doesn't solve the issue. How can I make the cursor a pointer while hovering the "X" but not on the text of the div?
Relevant code :
div{
font-size:2em;
position:relative;
display:inline-block;
}
div::before{
content:'X';
cursor:pointer;
display:block;
text-align:right;
}
<div>some text</div>
--EDIT--
I am aware that making a child or sibling in the markup and applying cursor:pointer; to it will work but I would like to minimize markup and use a pseudo element for the close button as it has no semantic value.
I'm really late to the game, but I just now figured out a solution to this problem.
This solution allows a pointer on the child element, while retaining a default cursor on the parent element.
(See the accepted answer here for a solution that doesn't include keeping the parent element's cursor default: cursor: pointer doesn't work on :after element?)
First of all, for this hacky solution, you have to give up the ability to interact with the parent element using the mouse.
Set the parent element to cursor: pointer.
Then, setting the parent element to pointer-events: none will allow you to "click/hover through" the parent element.
Then, for the pseudo element, just re-enable pointer events with pointer-events: auto.
Voila!
div{
font-size:2em;
position:relative;
display:inline-block;
/* remove ability to interact with parent element */
pointer-events: none;
/* apply pointer cursor to parent element */
cursor:pointer;
/* make it more obvious which is child and which parent for example*/
background: darkred;
}
div::before{
content:'X';
display:block;
text-align:right;
/* restore ability to interact with child element */
pointer-events: auto;
/* make it more obvious which is child and which parent for example*/
width: 30px;
text-align: center;
background: white;
}
<div>some text</div>
I believe that it's not working in pseudo elements in IE,
What I'm use to do is add cursor: ponter to main element.
If you need to add cursor: pointer to pseudo element only, than only way is to add child element
like:
<div><span></span>some text</div>
div{
font-size:2em;
position:relative;
display:inline-block;
}
div > span{
cursor:pointer;
}
div > span::before{
content:'X';
display:block;
text-align:right;
}
But than is no point to using pseudo class...
demo
HTML:
<div>
<div id="closebutton">
X
</div>
some text
</div>
css:
div{
font-size:2em;
position:relative;
display:inline-block;
}
div#closebutton{
cursor:pointer;
display:block;
text-align:right;
}
DEMO
demo
div{
font-size:2em;
position:relative;
display:inline-block;
border:1px solid #000;
margin:20px;
padding:20px;
}
div:after{
cursor:pointer;
display:block;
position:absolute;
height:20px;
width:20px;
top:-10px;
right:-10px;
content:'X';
font-size:15px;
}
<div>
some text
</div>
In order to make IE 7,8,9,10 behave like regular browsers that can deal with pseudo selectors, I always use IE7.js, a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues related to Internet Explorer. An alternative would be modernizr.js which is a good implementation to get pseudo selectors working with IE. I hope, that helps.
I have a problem with margin-top/bottom on <a> elements - it doesn't seem to work.
This is the HTML code:
<div class="pages-link">
1
2
3
....
</div>
This is the CSS code:
.pages-link {
margin:2em 0;
word-spacing:.25em;
}
.pages-link a {
background:#d7d7d7;
border:1px solid #ccc;
-moz-border-radius:3px;
-webkit-border-radius:3px;
-khtml-border-radius:3px;
border-radius:3px;
color:#333;
padding:.3em .5em;
text-decoration:none;
}
This is how the final result looks like. The problem is obvious, I want 5 or 10px of margin-bottom for the <a> elements, but the property doesn't get applied.
What am I missing?
You need to add display: inline-block; to your anchor selector. Anchors are by definition inline elements and do not accept width, height, margin etc until they are defined as block level or inline-block elements.
I think you're better of doing display:block; and float:left; because display:inline-block; is not supported in all browsers.
I am trying to figure out how to target only the first that resides within a on one of my pages...
Maybe I am doing something wrong, looking for help.
<div id="mem-tools">
<div class="members">
Link One
Link Two
</div>
</div>
In my CSS, I have the following code:
#mem-tools a{
padding:15px 0 0 65px;
font-weight:bold;
color:#444444;
font-size:14px;
height:35px;
display:block;
}
however, I only want the first to be styled this way, and not the second within the .members class
From what I understand psuedo classes do not work for IE, so I an not use :nth selector.
Can I define the first only, to use the above noted style?
Am I over complicating this?
The :first-child would work, but if you don't want to use pseudos can also create a class to style the element... might be eaiser:
<div id="mem-tools">
<div class="members">
Link One
Link Two
</div>
</div>
Then you can style the class accordingly:
#mem-tools a.first-link{
padding:15px 0 0 65px;
font-weight:bold;
color:#444444;
font-size:14px;
height:35px;
display:block;
}
That way you can avoid pseudos.
#mem-tools a:first-child might do the trick
.mem-tools +a {
/*
try your Styles here
*/
}
in my navigation bar i have this code.
<div id="aboutnav"><a class="hl" href="#"><h2>about\a</h2></a></div>
all the div does in the case is put the text in position and in the a.hl it's -
a.hl{
background-color:#000;
text-decoraction:none;
color:#fff;
}
the text is the right colour, it is in the correct position but there is no background colour.
This is because in HTML4/XHTML you can't nest hx elements into a! Try using this instead:
<div id="aboutnav"><h2><a class="hl" href="#">about\a</a></h2></div>
I think you would need to update your css in a similar way:
a.hl{
display:block;
background-color:#000;
text-decoraction:none;
color:#fff;
}
Your style is probably being overridden by another style for h2. Try:
a.h1 h2{
background-color: #000;
}
You should write the HTML like this
<div id="aboutnav">
<h2>
<a class="hl" href="#">about</a>
</h2>
</div>
And then style it like so
#aboutnav h2 {
background-color:#000;
}
#aboutnav h2 a {
text-decoration:none;
color:#fff;
}
Example: http://jsfiddle.net/jasongennaro/rbxBL/
Fyi... you had text-decoration misspelled.
Also, you really don't need the class for the a when the HTML is done this way.