I've got a container div that could contain any number of children. I want to target all links that are direct descendants of the container div, and can do so with .container > a. But then, I want to give a different styling to the first link that is a direct descendent of the container. I assumed .container > a:first-child would perform this task, but it would seem not.
Note that using .container a:first-child would actually target the first two "incorrect" links, so I can't use that, I don't think.
Obviously I can rework the structure of the HTML, but I'd like to see if there's a CSS solution here.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container > a
{
background-color: plum;
}
.container > a:first-child
{
background-color: pink;
}
</style>
</head>
<body>
<div class="container">
<div>Incorrect link</div>
<div><div>Incorrect link 2</div></div>
<p>Some text</p>
Category 1
Category 2
Category 3
</div>
</body>
</html>
you can use .container > a:first-of-type
jsfiddle : http://jsfiddle.net/cP7jZ/
.container > a:first-child will work, as you can see from this example
Related
This is an image of my code. I have a footer-container inside which there are several footer-content classes, each of which contains a <p> tag and then a <span> tag. I want to apply a style to span of the last footer-content
This is what it looks like I want to remove the last - after risk analysis
I have tried this
.footer-container:last-child :last-child {
display: none;
}
but this hides all the span tags
Edit: To create those dashes between your entries, instead of creating those span.footer-dash at all, you can do that using CSS only:
.footer-content:not(:last-child) .footer-item::after {
content: "-";
color: #666;
padding: 0 20px;
}
Apply styling as needed. The selector makes sure the dash isn't added after the last element at all, so no need to hide anything if it's not there in the first place.
:last-child asks Am I the last child of my parent?, not Who is my last child element? (which your selector suggests you think).
So either use the descendant selector (space):
.footer-container :last-child :last-child {
display: none;
}
or use it on the correct child elements:
.footer-content:last-child :last-child {
display: none;
}
Please note that usage of :last-child should be made carefully as it ties your stuff very closely to the DOM structure (which you might want to change later).
I'd suggest you change it like this:
.footer-content:last-child .footer-dash {
display: none;
}
The :last-child CSS pseudo-class represents the last element among a group of sibling elements.
/* Selects any <p> that is the last element
among its siblings */
p:last-child {
color: lime;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child
That selector should be
.footer-container :last-child :last-child { ... }
(space after .footer-container)
I think this should help you
.footer-container .footer-content:last-child{
background-color:red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Css practice</title>
</head>
<body>
<div class="footer-container">
<div class="footer-content">
<p><span>Section Number 1</span></p>
</div>
<div class="footer-content">
<p><span>Section Number 2</span></p>
</div>
<div class="footer-content">
<p><span>Section Number 3</span></p>
</div>
<div class="footer-content">
<p><span>Section Number 4</span></p>
</div>
</div>
</body>
</html>
You can just add:
.footer-container .footer-content:last-child .footer-dash {
display: none;
}
As per the Q - I want to remove the last - after risk analysis
This will just work fine for you. This will also prevent other elements from being affected by your :last-child CSS selection if you change the order of the content inside the .footer-content.
Try this:
.footer-container .footer-content:last-child span {
/* css here */
}
This code should work:
.footer-container:last-child>:last-child {
display: none;
}
Using a space will target all the elements that are last children inside .footer-container:last-child, while using > will target the last child of
.footer-container:last-child only.
On this answer: https://stackoverflow.com/a/1725486/2519402 to a question, it states:
It sounds like you had h1 .myClass instead of h1.myClass - there's an
important distinction:
h1 .myClass { } /* any element with class="myClass" within an <h1> */
h1.myClass { } /* any <h1> with class="myClass" */
I don't have enough points to ask my question as a comment on that answer.
So, based on what is said above, shouldn't the following code work:
<style>
h3 .h3nobtmgn {
margin-bottom:-20px;
}
</style>
<h3><strong class="h3nobtmgn">Why would I need or want this item?</strong></h3>
Yes, but vertical margin styles won't work on an inline element like <strong>. http://www.w3.org/TR/CSS21/box.html#propdef-margin-top
So your CSS selector will target the correct element but the style you applied will have no effect.
For that to work you can try:
<style>
h3 .h3nobtmgn {
display: block;
margin-bottom:-20px;
}
</style>
<h3><strong class="h3nobtmgn">Why would I need or want this item?</strong></h3>
Yes it does.
h1.myClass would change the appearance of
<h1 class="myClass">...</h1>
And h1 .myClass would change the appearance of
<h1> ... <span class="myClass">...</span></h1>
You will see through http://www.w3schools.com/cssref/trysel.asp that when you are doing div p it will select all p inside of div. So, the answer is yes.
here is a sample: https://jsfiddle.net/r5d0kkb5/
which shows selectors for div p and div .B and also div .A for your thoughts.
Code:
<div class="A">
<p >
A
</p>
<p class="B">
B
</p>
</div>
Css:
div p {
background-color: cyan;
}
div .B{
font-size: 32px;
}
div .A{
color: red;
}
.outer a:not(:last-of-type) {
color: red;
}
<div class="outer">
First
Second
<div>
Third
</div>
Fourth
Fifth
</div>
Is there a way, to target all <a>'s inside div.outer (I can't think of way to target the one inside ) container? The only workaround I can think of is css: .outer a:not(.last) and adding .last to last <a>. Any ideas? Background: The main idea why I'm doing this, is that I have elements, which line near edge of container, so each of them has to have margin of 10 from right, except last one. In this case, i don't have to type class margin-right-10 in each <a>, its just my own style I'm following.
If you number of levels inside .outer is known (or limited) you can extend selector like this:
.outer > * > a,
.outer > a:not(:last-of-type) {
color: red;
}
<div class="outer">
First
Second
<div>
Third
</div>
Fourth
Fifth
</div>
The part .outer > * > a makes sure that deeper links are also included into matched set.
UPD. Version #2 that also takes into consideration situation when the nested links are the last:
.outer > *:not(:last-child) > a,
.outer > a:not(:last-child) {
color: red;
}
<div class="outer">
First
Second
<div>
Third
</div>
Fourth
Fifth
<div>
Six
</div>
</div>
.outer > a:not(:last-of-type), .outer > div a
Works as well, but without changing your markup.
Let's say my html looks like this:
<div class="container">
<... some html here ...>
</div>
I want to get the first direct child of .container.
I could do .container > div:first-child but that's assuming the it is a div which is not always the case.
Use the :first-child pseudo-class without a tagname:
.container > :first-child
This will grab any element that is the immediate first child, regardless of its tagname. This is similar to the way in which we use other pseudo-classes such as :hover which alone targets any element, while a:hover targets only the hover state of anchors.
Not using the element itself, but a class is a better solution and way more semantic for so many reasons.
And give the class to the children of the element, not only the container like this:
HTML:
<article class="container">
<p class="blah">First paragraph...</p>
<p class="blah">Lorem ipsum...</p>
<p class="blah">Dolor sit amet...</p>
</article>
CSS:
.blah {
background: red;
color: white;
}
.blah:first-child {
background: #000;
}
You can see it in action here: http://jsfiddle.net/Roobyx/ygP4B/
I have several <p> elements in my HTML body. I only want to show the first two paragraphs, and set display:none to all paragraphs after. Why does the following code not work?
<html>
<head>
<style type="text/css">
p:gt(2) { display:none; }
</style>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</body>
</html>
My code still shows all 4 paragraph elements in Chrome web browser.
How do I correct my code to achieve the objective I originally stated?
If they're siblings the easiest approach with some backwards compatibility would be:
p + p ~ p {
display: none;
}
JS Fiddle demo.
You could also use:
p:nth-of-type(2) ~ p {
display: none;
}
JS Fiddle demo.
References:
CSS Selectors.
CSS :nth-of-type() pseudo-class.
Adjacent sibling (+) combinators.
General sibling (~) combinators.
:gt is just a jQuery short hand,
to select it in css:
p:nth-of-type(n+3)
You can use sibling selector:
p + p + p {display:none;}
Other than the first two, it selects all!
jsFiddle: http://jsfiddle.net/KK3mk/