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.
Related
I got some code here:
<html>
<head>
<title>Select View</title>
</head>
<body class="class-1 class-2 class-3 class-4 class-5 class-6">
Many divs here
...
...
...
<div id="test">
<p>PHP code here</p>
</div>
</body>
</html>
And I want to hide the div with the test id. My site is based on wordpress, so in css I have to refer to a specific body.
I tried:
body.class-1, .class-2, .class-3, .class-4, .class-5, div#test{
color: red;
}
and the color is working, "PHP code here" is on red color, but when i do this:
body.class-1, .class-2, .class-3, .class-4, .class-5, div#test{
display: none; //or visibility: hidden;
}
all site dissapears.
Any ideas how to hide only this div?
Just use what you have already
div#test{
display: none;
}
When you called body.class-1, .class-2, .class-3, .class-4, .class-5, and set display: none, it is the expected behaviour, because you are hiding all elements rather than just the test div!
Since you don't repeat the id in other elements you can just use,
#test {
display: none;
}
Just in-case if you have another element (ex: span) with the same id you have to specifically mention that you need to hide the div element with id=test
div#test {
display: none;
}
It is always a good thing to uniquely mark your elements if possible. Since you are dealing with classes if you just mention one class it will select the matching element.
In the below case you used your selection is the whole body,
body.class-1, .class-2, .class-3, .class-4, .class-5, div#test{
display: none; //or visibility: hidden;
}
This might be the same case if you just use the below code,
.class-1 {
display: none; //class-1 supposed to pick the whole body here;
}
This is more of a theoretical question.
Is the stack of overrides for CSS ad-infinitum? For instance, is there always a CSS override for every override?
Lets say I have written this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<style>
.a {
color: red;
}
/* Override it again */
div.a {
color: blue;
}
/* Again! */
body div.a {
color: yellow;
}
/* Again!! :) */
html body div.a {
color: yellow;
}
/* AND AGAIN!! */
html body div.a {
color: pink !important;
}
</style>
</head>
<body>
<div class="a">a</div>
</body>
</html>
Is !important combined with html body div.a the absolute highest level override for div.a?
Must there always exist something with a higher override?
In theory you can simply repeat a rule to increase the specificity.
.foo.foo.foo { }
In practise, browsers eventually treat a selector as having too many components and ignore it.
(There is also the style attribute, which is more specific than any selector)
inline styling with !important applied is the highest override I've ever used.
Example:
<div class="a" style="color: blue !important">a</div> Will override all other css applied
If you declare an inline style rule for div.a with the !important declaration it'll still override the rule declared in the <style> tag.
Any inline rule generally over-qualifies internally or externally declared styles, regardless of the number of selectors used to specify that rule. The only time an inline rule is over-qualified by internal or external styles is when the !important declaration is used - but if that declaration is used on an inline style you want to overwrite you'll be cursing.
In this case you'd need to apply some javascript to reset the attribute.
I have the following:
HTML
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Result</title>
</head>
<body>
<div>
<a href= https://google.com>Google</a>
<a href= https://google.com>Google</a>
<a href= https://google.com>Google</a>
</div>
</body>
</html>
CSS
a:hover{
text-decoration: none
}
a:first-child{
color: #CDBE70
}
a:nth-child(3){
color: #FFC125
}
I just started learning HTML and I have a problem. What I have above displays 3 links to google but they are all on the same line. I want each of the links to be on a new line. I tried using <p> and changed all the a's to p's in the CSS code but it doesn't do anything.
If the links are semantically in a list, you should reproduce that in the markup as well:
<ul>
<li>Google</li>
<li>Google</li>
<li>Google</li>
</ul>
If you don't want to have bullets in front of the links, you can remove them with CSS list-style-type: none; on either the ul or the lis.
CSS:
Add display: table in your tag
a{display: table;}
You can do it with CSS by using float:left; and clear:left;
a {
float:left;
clear:left;
}
Try using break to give a line break between the three links like this;
<div>
<a href= https://google.com>Google</a><br/>
<a href= https://google.com>Google</a><br/>
<a href= https://google.com>Google</a><br/>
</div>
<br> produces a line break in text.
Line break tag can be placed in other HTMl elements like
paragraphs, lists, tables and headings
Use line break tag for minor formatting issues. For larger issues
use tables and align attribute.
Line break tag does not require a closing tag.
For increasing the gap between the lines of text use CSS margin property.
• margin-bottom: 0
• margin-left: 0
• margin-right: 0
• margin-top: 0
Use the <br/> tag to break the row.
Google<br/>
But with this solution you'll have to modify the css, as the next <a> is no longer a child. Instead you can use nth-of-type and first-of-type:
a:hover { text-decoration: none }
a:nth-of-type(3) { color: #FFC125 }
a:first-of-type { color: #CDBE70 }
This will assure that only <a> tags are part of the selectors.
or you can put each link in it's own <div>:
<div class="menu">Google</div>
<div class="menu">Google</div>
<div class="menu">Google</div>
a:hover { text-decoration: none }
div.menu:nth-child(3) a { color: #FFC125 }
div.menu:first-child a { color: #CDBE70 }
Simply add <br/> or <p> tag after each of your link ,it will be displayed on new line. :)
see this Demo
and css
<style>
div a{
display:list-item;
}
</style>
You can try this:
Working Demo
a{
display:block;
margin-bottom:10px;
}
a:hover{
text-decoration: none
}
a:first-child{
color: #CDBE70
}
a:nth-child(3){
color: #FFC125
}
In order for you to break into a new line, you should look to use the display: block; declaration in your css.
Here's a few reasons as to why to use display instead of float.
Floating elements is all well and good, but can become messy due to the 'floated element' coming out of the DOM, which makes it harder to position other elements.
a elements default to display:inline, meaning multiple a tags appear in a single line. By changing them to display:block; means that only one will be in a row at a time (i.e. what you are looking for).
A quick demo would be something like:
a:hover {
text-decoration: none
}
a:first-child {
color: #CDBE70
}
a:nth-child(3) {
color: #FFC125
}
a {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<title>Result</title>
</head>
<body>
<div>
Google
Google
Google
</div>
</body>
</html>
You can do what Twitter's Bootstrap does all over the place and surround your elements with divs with proper classes. What I would do is:
CSS
.anchors a:hover{
text-decoration: none
}
.anchors div:first-child a{
color: #CDBE70
}
.anchors div:nth-child(3) a{
color: #FFC125
}
HTML
<div class="anchors">
<div>
<a href= https://google.com>Google</a>
</div>
<div>
<a href= https://google.com>Google</a>
</div>
<div>
<a href= https://google.com>Google</a>
</div>
</div>
I surrounded a tags with divs to make the a tags selectable by their indexes in css. In order to access them in the dom, defined a wrapper div and named its class anchors. I am first selecting the wrapper div (.anchors) and accessing it's child divs with indexes and then their anchors.
Here is the working fiddle.
I'm wanting to do this transition effect, but it only works on the first div, on Monday that aims to affect the first, nothing happens.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css">
#firstElement:hover + #secondElement {
color:red;
}
#secondElement:hover + #firstElement {
color:blue;
}
</style>
</head>
<body>
<p id="firstElement">Hover</p>
<p id="secondElement">Hello</p>
</body>
</html>
Why this doesn't work should be clear from the other answers. Here's a solution.
<div id="elements">
<p id="firstElement">Hover</p>
<p id="secondElement">Hello</p>
</div>
CSS
#elements:hover #secondElement:not(:hover) {
color:red;
}
#elements:hover #firstElement:not(:hover) {
color:blue;
}
DEMO
first you need to set transition (if you mean transition and not hover) to the elements like this:
#firstElement:hover + #secondElement {
color:red;
transition:color 0.5s ease; /* this is an example */
}
#secondElement:hover + #firstElement { /* this is not right selector */
color:blue;
transition:color 0.5s ease; /* this is an example */
}
and second there is no backward in CSS, you can just change color of second element by hovering first element.
for doing that you can to use jQuery.
use this JQuery code:
$("#secondElement").hover(function(){
$("#firstElement").toggleClass("firstcolor");
});
and add this CSS:
.firstcolor{
color:blue;
}
here is DEMO
note: this is not only way
From Adjacent sibling selectors
Adjacent sibling selectors have the following syntax: E1 + E2, where E2 is the subject of the selector. The selector matches if E1 and E2 share the same parent in the document tree and E1 immediately precedes E2, ignoring non-element nodes (such as text nodes and comments).
This means #firstElement precedes #secondElement, therefore it works.
But #secondElement doesn't precede #firstElement, therefore it doesn't work.
the psuedo hover effect only works on parent-child relationships.
so if you have a menu where Toys is the parent, and barbie dolls, car trucks, and legos are the 3 child elements, you can do psuedo classes.
For example if you did
#toys:hover #barbiedolls { background: red; }
that would work. But if you tried doing
#barbiedolls:hover #toys { background: red; }
that would not work. Neither would
#barbiedolls:hover #cartrucks { background: red; }
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