I need to add pipe between links except after the last . My html is rendered in the following way , html is rendered with same class.
<!DOCTYPE html>
<html>
<head>
<style>
p:last-of-type {
background: #ff0000;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<div class="sample" style="display:inline-block">
<div >
<p class="para">link1</p>
</div>
</div>
<div class="sample" style="display:inline-block">
<div >
<p class="para">link1</p>
</div>
</div>
<div class="sample" style="display:inline-block">
<div >
<p class="para">link1</p>
</div>
</div>
</body>
</html>
I need to add Pipe but after last link no pipe should be displayed . How can i do it for this case .
Fiddle Link
P.S. : This can be done easily when we have different links with different class . In my case links are dynamic and after last link no pipe should be displayed
Use this selector .sample:not(:last-of-type), which will target all but the last item.
Do note, when combining a class name with last-of-type, it will target any element type not being the last (if there is more than 1) having the given class.
Updated fiddle (added the pipe to the div so it won't pick up the color from the p)
.sample:not(:last-of-type) > div::after {
content: ' | ';
}
Another option is last-child, .sample:not(:last-child), which also will target all but the last.
Do note, when using last-child, it means the last no matter class or element type, so if you have another element coming after the last sample, that will count as the last, and here is a fiddle sample showing how this rule will fail in cases like that.
Updated fiddle (added the pipe to the div so it won't pick up the color from the p)
.sample:not(:last-child) > div::after {
content: ' | ';
}
A third option is to use the immediate sibling selecor +, which target all sibling elements with the given class but the first.
p:last-of-type {
background: #ff0000;
display: inline-block;
}
.sample + .sample > div::before {
content: ' | ';
}
<h1>This is a heading</h1>
<div class="sample" style="display:inline-block">
<div >
<p class="para">link1</p>
</div>
</div>
<div class="sample" style="display:inline-block">
<div >
<p class="para">link1</p>
</div>
</div>
<div class="sample" style="display:inline-block">
<div >
<p class="para">link1</p>
</div>
</div>
Here's another way:
'Add a pipe before each link - only if it comes after another one'
.sample + .sample .para:before {
content: "|";
margin-right: 10px;
color: red;
}
.sample + .sample .para:before {
content: "|";
margin-right: 10px;
color: red;
}
<h1>This is a heading</h1>
<div class="sample" style="display:inline-block">
<div >
<p class="para">link1</p>
</div>
</div>
<div class="sample" style="display:inline-block">
<div >
<p class="para">link1</p>
</div>
</div>
<div class="sample" style="display:inline-block">
<div >
<p class="para">link1</p>
</div>
</div>
I think you want like this.
.sample:last-child div {
border: none;
}
.sample div {
border-right: 1px solid #000;
margin-right: 10px;
padding-right: 10px;
}
<h1>This is a heading</h1>
<div>
<div class="sample" style="display:inline-block">
<div>
<p class="para">link1</p>
</div>
</div>
<div class="sample" style="display:inline-block">
<div>
<p class="para">link1</p>
</div>
</div>
<div class="sample" style="display:inline-block">
<div>
<p class="para">link1</p>
</div>
</div>
</div>
One way to do it is to add this CSS rule:
.sample:not(:last-of-type) {
border-right: 1px solid black;
}
https://jsfiddle.net/9c8szuc5/2/
Related
I want to apply one for all hover color change effect on the icon, text and button(top to bottom). At the moment hover is working separately either text and icon or button is changing color.
here is the code and also a fiddle
<div class="col-1-left">
<div class="content">
<div class="icon">
<img src="#" />
</div>
<div class="text">
<h4>
Title text
</h4>
</div>
</div>
<div class="button">
Read More
</div>
</div>
.col-1-left {
width: 100%;
background: #555;
padding: 10px;
margin: 0;
color: red;
}
.col-1-left:hover {
color: white;
}
.button a {
color: #000;
}
.button a:hover {
color: white;
}
EDIT:
Although some of the answers worked on jsfiddle, none of them worked so far on live site.. I am pasting updated HTML code structure from it as the one above was only a sample. Maybe that will help sorting this issue out. Thanks!
<div class="et_pb_column et_pb_column_1_3 col-1-left et_pb_column_93 cboxElement">
<div class="et_pb_blurb et_pb_module et_pb_bg_layout_light et_pb_text_align_center mp_m_blurb_pulse fins-color-aqua et_pb_blurb_50 et_pb_blurb_position_top">
<div class="et_pb_blurb_content">
<div class="et_pb_main_blurb_image">
<span class="et-pb-icon et-waypoint et_pb_animation_off et-animated" style="color: #28375c;">?</span>
</div>
<div class="et_pb_blurb_container">
<h4>Title</h4>
<h5>Subhead</h5>
</div>
</div>
</div>
<div class="et_pb_button_module_wrapper et_pb_module et_pb_button_alignment_center">
<a class="et_pb_button et_pb_button_26 et_pb_module et_pb_bg_layout_dark" href="#">Find Out More</a>
</div>
</div>
Please Try this,
.col-1-left:hover * {
color: white;
}
I did a code snippet for you. Please try it and confirm it is what you need.
The thing is that you need to add the hover effect to the parent, i.e. .col-1-left in order to be able to change the color to its children elements.
.col-1-left {
width: 100%;
background: #555;
padding: 10px;
margin: 0;
color: red;
}
.col-1-left:hover, .col-1-left:hover .button a {
color: white;
}
.button a {
color:#000;
}
<div class="col-1-left">
<div class="content">
<div class="icon">
<img src="#" />
</div>
<div class="text">
<h4>Title text</h4>
</div>
</div>
<div class="button">
Read More
</div>
</div>
I need to apply a style to text in all children divs except the one that has a span with class .fa
.parentDiv > .column :not(.fa) {
font-weight: bold
}
<div class="parentDiv">
<div class="column">aaa</div>
<div class="column">bbb</div>
<div class="column">
<span class="fa">ccc</span>
</div>
</div>
I do need to keep CSS in one line as it's a part of a larger style sheet. How do I do that?
You can use :not with :last-of-type
Snippet
.parentDiv > .column:not(:last-of-type) {
font-weight: bold;
color:red;
}
<div class="parentDiv">
<div class="column">aaa</div>
<div class="column">bbb</div>
<div class="column">
<span class="fa">ccc</span>
</div>
</div>
EDIT based on #Oriol's comment
:not(:last-of-type) does not mean "doesn't contain a .fa
which makes sense, if your code could be dynamic.
here is another approach:
Snippet
.parentDiv > .column span:not(.fa) {
font-weight: bold;
color: red;
}
<div class="parentDiv">
<div class="column">
<span class="gsdfasd">text</span>
</div>
<div class="column">
<span class="faadsasfa">some text</span>
</div>
<div class="column">
<span class="fa">this will NOT BE red</span>
</div>
</div>
The only way to do this is to use
.parentDiv > .column { font-weight: bold }
.parentDiv > .column > .fa { font-weight: normal }
The way the not() selector works is that you have to target a specific element/class/ID. You would have to wrap the text from each column in a span and then add the :not(.fa) CSS to the span:
.parentDiv > .column span:not(.fa) {
font-weight: bold
}
<div class="parentDiv">
<div class="column">
<span>aaa</span>
</div>
<div class="column">
<span>bbb</span>
</div>
<div class="column">
<span class="fa">ccc</span>
</div>
</div>
I have header in such a way that I would like to hide my image and span's in my pheader div if "banner" exists. Is there a quick way to do this using CSS selectors? Below is the HTML code.
<header>
<div id="banner">
<!-- main content -->
</div>
<div class="pheader">
<div class="user-panel">
<div id="hey-user" class="d2c-user-panel">
<img src="../images/defaultHeadshot_lg.png" class="userimg">
<!-- Hide This -->
<span class="caret" id="down-arrow"></span>
<span class="hey-user d2c-header-username"><b>Hello</span>
</div>
</header>
Yes.
#banner + .pheader img,
#banner + .pheader span {
display:none;
}
This selector only applies if .pheader is directly after #banner.
You might find this Tutsplus article useful:
The 30 CSS Selectors You Must Memorize
.pheader {
padding: 1em;
background: lightblue;
}
#banner + .pheader img,
#banner + .pheader span {
display: none;
}
<header>
<div id="banner">
<!-- main content -->
</div>
<div class="pheader">
<div class="user-panel">
<div id="hey-user" class="d2c-user-panel">
<img src="http://lorempixel.com/output/animals-q-c-100-100-3.jpg" class="userimg" />
<span class="caret" id="down-arrow">Arrow</span>
<span class="hey-user d2c-header-username"><b>Hello</b></span>
</div>
</div>
</div>
</header>
It's probably worth noting that I've had to close a few divs in your original HTML structure which were missing from your code.
Try this. Link https://jsfiddle.net/7bv53xqd/
#banner + .pheader img {
display: none;
}
#banner + .pheader span {
display: none;
}
I'd like to have all surnames on the second line AND maintain the exact same width for test div. What is the best way of achieving this with CSS?
HTML:
<div class="test">
<h1>Mike S</h1>
</div>
<div class="test">
<h1>Mike Smith</h1>
</div>
<div class="test">
<h1>Mike Smiths</h1>
</div>
CSS:
.test {width:25%;float:left;background:red;margin-right:20px}
h1 {text-align:center}
http://jsfiddle.net/zcg9k5xh/
Update your code with this:
.test {width:25%;float:left;background:red;margin-right:20px}
h1 {text-align:center}
h1 span{display: block;}
<div class="test">
<h1>Mike <span>S</span></h1>
</div>
<div class="test">
<h1>Mike <span>Smith</span></h1>
</div>
<div class="test">
<h1>Mike <span>Smiths</span></h1>
</div>
You can also do this by using css, update above css
h1 span{display: list-item;list-style:none;}
jsfiddle with this
http://jsfiddle.net/zcg9k5xh/2/
Given that it seems you are willing to change your HTML, I would recommend you simply add <br> after the first name, instead of wrapping the last name in any other tags. This would be deemed best practice.
The HTML <br> Element (or HTML Line Break Element) produces a line
break in text
This will give more semantic HTML- without the need to adjust native element styling, or clutter your DOM with uneccessary nodes.
.test {
width: 25%;
float: left;
background: red;
margin-right: 20px
}
h1 {
text-align: center
}
<div class="test">
<h1>Mike<br>S</h1>
</div>
<div class="test">
<h1>Mike<br>Smith</h1>
</div>
<div class="test">
<h1>Mike<br>Smiths</h1>
</div>
Use the word-spacing attribute to the child tag:
.test {
width: 25%;
float: left;
background: red;
margin-right: 20px
}
h1 {
background-color: blue;
word-spacing: 100px;
}
<div class="test">
<h1>Mike S</h1>
</div>
<div class="test">
<h1>Mike Smith</h1>
</div>
<div class="test">
<h1>Mike Smiths</h1>
</div>
I don't see what you are asking, it seems like the jsfiddle is what you are asking here.
But you can always set width to 100% so it cover for the text, if you want all that text in the same div then put it all under one Div tag.
Is this what you want?
.test {width:25%;float:left;background:red;margin-right:20px}
h1 {text-align:center}
<div class="test">
<h1>Mike</h1>
<h1>S</h1>
</div>
<div class="test">
<h1>Mike</h1>
<h1>Smith</h1>
</div>
<div class="test">
<h1>Mike</h1>
<h1>Smiths</h1>
</div>
I am trying to have a display that changes when hovering a div class. The idea is to have one div disappear when hovering another. I have tried using general sibling selectors to make the display change from inline to none. The CSS is as follows:
#Inicio {width: 100%;
height: 100%;
background-color: yellow;
position: absolute;
display: inline;
}
.buttons:hover ~ #Inicio {display: none;}
.buttons {width: 80%;
margin-left: auto;
margin-right: auto;
position: static;
margin-left: 10%;
font-size: 22px;
border-top: 1px solid white;
padding-top: 20px;
padding-bottom: 20px; }
.buttons:hover {font-size: 24px;
transition: all .5s ;}
And the HTML:
<div id="wrapper">
<div id="menubar">
<div id="menu">
<h1>Menu</h1>
</div>
<div class="buttons">
Inicio
</div>
<div class="buttons">
Productos
</div>
<div class="buttons">
Localizacion
</div>
<div class="buttons">
El equipo
</div>
<div class="buttons">
Ideas
</div>
<div class="buttons">
La pagina
</div>
</div>
<div id="content">
<div id="inicio"></div>
</div>
</div>
First of all, your id names doesn't match, its case sensitive, you #inicio and #Inicio are completely two different things..
And as I commented, the issue is that you cannot pop out of the element using CSS means you cannot select the parent element and than go ahead and select the parents sibling element, so you need to change your DOM, you are trying to select an element which is adjacent to the buttons parent element and not the button itself, so the best you can do is this
.buttons:hover ~ #content > #inicio {
display: none;
}
Demo
Altered DOM, you need to bring the elements on the same level, if #inicio is nested, it's fine, but to select it's parent, bring the elements adjacent to each other on the same level so that all are direct child to an element having an id of #wrapper
<div id="wrapper">
<div id="menu">
<h1>Menu</h1>
</div>
<div class="buttons">
Inicio
</div>
<div class="buttons">
Productos
</div>
<div id="content">
<div id="inicio">Disappear this</div>
</div>
</div>
As #enguerranws commented, I thought to put a compatibility table as well,
Credits - Support Table
Maybe because it's #inicio, not #Inicio ?
Then you need to change your DOM. You have to put #inicio in .buttons div. Or :
.buttons:hover ~ #Inicio
Won't work.
<div id="wrapper">
<div id="menubar">
<div id="menu">
<h1>Menu</h1>
</div>
<div class="buttons">
<span>Inicio</span>
<div id="inicio"></div>
</div>
</div>
<div id="content">
</div>
</div>
You should use that structure. Btw, I added a span to wrap your text, as it's not valid to put text directly in block element (here: div).