Is there any way to change the div content by CSS, I want to replace div text by the nth-child method in CSS, I tried
.member-info .mb-meta span:nth-child(1) {
display: none;
}
.member-info .mb-meta span:nth-child(1):after {
content: 'Speciality123';
}
.member-info .mb-meta span:nth-child(2) {
display: none;
}
.member-info .mb-meta span:nth-child(2):after {
content: 'Designation123';
}
<div class="member-info">
<h3>sometext</h3>
<div class="mb-meta">
<span>Speciality: </span>
</div>
<div class="mb-meta">
<span>Designation: </span>
</div>
</div>
something like that ?
.member-info .mb-meta span:nth-child(1) {
display: none;
}
.member-info .mb-meta:nth-child(2):after {
content: 'Speciality123';
}
.member-info .mb-meta span:nth-child(2) {
display: none;
}
.member-info .mb-meta:nth-child(3):after {
content: 'Designation123';
}
<div class="member-info">
<h3>sometext</h3>
<div class="mb-meta">
<span>Speciality: </span>
</div>
<div class="mb-meta">
<span>Designation: </span>
</div>
</div>
Related
with only css, how would one show/hide a div knowing its id?
with jQuery it would have been simple and even simpler with vanilla javascript, but how to do this with just css?
the checkbox hack needs to have a specific structure to work
also, I'd like it to only hide the div before the next h1, if there were any.
label:after {
content: " [show]";
cursor: pointer;
float: right;
}
p {
display: none;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]:checked + div {
display: block;
}
input[type=checkbox]:checked ~ label:after {
content: " [hide]"
}
<h1>
Vampires and Vegetarians
<label for="Vampires_and_Vegetarians"></label>
</h1>
<input type="checkbox" id="Vampires_and_Vegetarians">
<div id="Vampires_and_Vegetarians">
<p>Content for Vampires and Vegetarians</p>
</div>
In order for your checkbox to control things, it has to appear before it in the dom so I've moved it to the very top.
I've also changed your CSS a little, you were hiding the p and then trying to show the div now we're hiding the div then showing it.
I've also changed you + to a ~ as the div was not a direct sibling.
input[type=checkbox] {
display: none;
}
input[type=checkbox]:checked~h1 label:after {
content: " [hide]"
}
label:after {
content: " [show]";
cursor: pointer;
float: right;
}
input[type=checkbox]~div {
display: none;
}
input[type=checkbox]:checked~div {
display: block;
}
<section>
<input type="checkbox" id="Vampires_and_Vegetarians">
<h1>
Vampires and Vegetarians
<label for="Vampires_and_Vegetarians"></label>
</h1>
<div id="Vampires_and_Vegetarians">
<p>Content for Vampires and Vegetarians</p>
</div>
</section>
<section>
<input type="checkbox" id="Zombies_and_Zucchini">
<h1>
Zombies and Zucchini
<label for="Zombies_and_Zucchini"></label>
</h1>
<div id="Zombies_and_Zucchini">
<p>Content for Zombies and Zucchini</p>
</div>
</section>
I hope you find this helpful 🙂
Feel free to ask for clarification.
You will need to change the hierarchy of the elements here like below. Because ~ is used to target the next siblings elements not the previous one. Also don't use the same id twice
label:after {
content: " [show]";
cursor: pointer;
float: right;
}
.content {
display: none;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]:checked~.content {
display: block;
}
input[type=checkbox]:checked~h1 label:after {
content: " [hide]"
}
<div>
<input type="checkbox" id="1">
<h1>
1
<label for="1"></label>
</h1>
<div class="content">
<p>Content for 1</p>
</div>
</div>
<div>
<input type="checkbox" id="2">
<h1>
2
<label for="2"></label>
</h1>
<div class="content">
<p>Content for 2</p>
</div>
</div>
Id cannot be used twice in the same page. read-
https://css-tricks.com/the-difference-between-id-and-class/
Your code is right but the structure was slightly wrong. See my snippet below
label:after {
content: " [show]";
cursor: pointer;
float: right;
}
div {
display: none;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]:checked ~ label ~ div {
display: block;
}
input[type=checkbox]:checked ~ label:after {
content: " [hide]"
}
<input type="checkbox" id="Vampires_and_Vegetarians">
<label for="Vampires_and_Vegetarians">Vampires and Vegetarians</label>
<div><p>Content for Vampires and Vegetarians</p></div>
Hope this helps :)
UPDATE AFTER READING PO COMMENT
In case you have more divs to show and hide content through checkbox,
you just need to apply a unique id to every div. That's it. :)
see below example
label:after {
content: " [show]";
cursor: pointer;
float: right;
}
section {
display:block;
margin-top:20px;
}
div {
display: none;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]:checked ~ label ~ div {
display: block;
}
input[type=checkbox]:checked ~ label:after {
content: " [hide]"
}
<section>
<input type="checkbox" id="Vampires_and_Vegetarians1">
<label for="Vampires_and_Vegetarians1">Vampires and Vegetarians 1</label>
<div><p>Content for Vampires and Vegetarians 1</p></div>
</section>
<section>
<input type="checkbox" id="Vampires_and_Vegetarians2">
<label for="Vampires_and_Vegetarians2">Vampires and Vegetarians 2</label>
<div><p>This is 2nd para</p></div>
</section>
<section>
<input type="checkbox" id="Vampires_and_Vegetarians3">
<label for="Vampires_and_Vegetarians3">Vampires and Vegetarians 3</label>
<div><p>This is 3rd para</p></div>
</section>
I want to make a form for my react project. I have a text and it's corresponding text field against it. I tried using flexbox but I didn't do it right. This is my code
<div className="time-from-container">
<h4 style={styles.fontStyle}>From : </h4>
<TextField
id="time_in"
underlineFocusStyle={{borderColor: '#293C8E'}}
floatingLabelFocusStyle={{color: '#293C8E'}}
style={{width: 120}}
value={this.secondsToHms(this.props.new_marker_reducer.start)}
floatingLabelText="Start Time"
/>
</div>
<div className="time-to-container">
<h4 style={styles.fontStyle} >To :</h4>
<TextField
id="time_out"
underlineFocusStyle={{borderColor: '#293C8E'}}
floatingLabelFocusStyle={{color: '#293C8E'}}
style={{width: 120}}
value={this.secondsToHms(this.props.new_marker_reducer.end)}
floatingLabelText="End Time"
/>
</div>
I want to align then like this
How should I do it?
You can use flexbox and give the h4 a width
* {
margin: 0;
}
div {
display: flex;
margin: 0 0 1em;
align-items: center;
}
h4 {
width: 80px;
}
<div>
<h4>From: </h4>
<input type="text">
</div>
<div>
<h4>To: </h4>
<input type="text">
</div>
Or you can use the table display properties to mimic a table layout
* {
margin: 0;
}
.parent {
display: table;
}
.parent > div {
display: table-row;;
}
h4,input {
display: table-cell;
margin: 0 0 1em;
}
h4 {
padding-right: 1em;
}
<div class="parent">
<div>
<h4>From: </h4>
<input type="text">
</div>
<div>
<h4>To: </h4>
<input type="text">
</div>
</div>
.time-from-container h4, .time-to-container h4 {
display:inline-block;
width:90px;
}
Here is my html markup:
<div class="expander-container" data-css="expander-container">
<div class="top-comment-container" data-css="top-comment-container">
<a class="expand-anchor" data-css="expand-anchor" >
<div><span class="alternate-color icon-next arrow"
data-css="alternate-color icon-next _2Cx2VFM04V1vDEfkDEJ3Cw" ></span></div>
<div class="activity-item activity-container"
data-css="activity-item" >
<div class="activity-text" data-css="activity-text" ><span >Content</span></div>
<div class="activity-vote-count" data-css="activity-vote-count" ><span >0</span><span> vote</span></div>
<div class="activity-reply-count"
data-css="activity-reply-count" ><span>1</span><span> reply</span></div>
<time datetime="Wed May 25 2016 15:57:21">
<span >May 25, 2016, 3:57 PM</span></time></div>
</a>
</div>
</div>
Here is my css (in less)
.expander-container {
display: flex;
flex-direction: column;
}
.expand-anchor {
background: none;
border: none;
padding: 0;
cursor: pointer;
align-self: center;
&:hover {
text-decoration: none;
}
}
.icon-next:before {
content: ">";
}
.arrow:before {
display: inline-block;
transform: rotate(0deg);
transition: transform .25s ease-out;
.expand& {
transform: rotate(90deg);
}
}
.top-comment-container {
display: flex;
flex-direction: row;
align-items: flex-start;
border: 1px solid green;
flex-wrap: nowrap;
}
.reply-container {
display: flex;
}
// activity-item
.activity-item {
margin-left: 5px;
}
.reply-item {
margin-left: 10px;
border: 1px solid blue;
}
.activity-container {
display: flex;
}
.activity-text {
align-self: center;
flex-grow: 1;
flex: 5;
// flex-basis: 100;
}
.activity-vote-count {
align-self: center;
// width: 10%;
flex: 1;
}
.activity-reply-count {
align-self: flex-end;
// flex-basis: 1;
// width: 10%;
flex: 1;
}
.activity-container {
align-self: center;
}
What I want to achieve is to have all these elements aligned on a single axis.
e.g.
> Content 0 vote 1 reply May 25, 2016, 3:57 PM
However as you can see in my codepen coode (http://codepen.io/kongakong/pen/YWKvgG?editors=1100), the arrow somehow occupies one line by itself. The rest of content is squeezed to the next line.
I have tried a few thing e.g. add flex-basis, flex-wrap: nowrap etc but they do not have any effect.
A second question is how can I have finer control on the placement? I want the text 'Content' to occupy most of the space in a row. Information such as vote and time should be moved to the right hand side. I have applied the 'flex-grow:1' to the text but it does not grow and fill the space.
Flex row works by aligning its immediate children in a row. You have your elements nested too deeply. Everything you want on the same row needs to be siblings. You can see some work I've done with flex for reference http://codepen.io/steezeburger/pen/LNEaKv
<div class="flex-row">
<div class="wrapper">
<div class="flex-column skinny">
<span class="flex-vertical-center af af-icon" data-bind="css: action_color">
<i class="fa fa-check"></i>
</span>
</div>
<div class="flex-column">
<span class="af af-action">New Order</span>
<span class="af af-name">John Carmack</span>
</div>
</div>
<div class="flex-column">
<span class="af af-time-lapsed">13m ago</span>
<span class="af af-value">$65</span>
</div>
</div>
This is a bit more advanced as I have nested columns in my rows, but you can see above that .wrapper and the last .flex-column div will be on the same row. Check out the codepen for a clearer example.
try this code
<style>
.top-comment-container {
width: 40em;
}
.alternate-color {
display: inline-block;
}
.activity-item {
display: flex;
justify-content: space-between;
}
.abcd {
display: flex;
}
</style>
</head>
<body>
<div class="expander-container" data-css="expander-container">
<div class="top-comment-container" data-css="top-comment-container">
<a class="expand-anchor" data-css="expand-anchor">
<div><span class="alternate-color icon-next arrow" data-css="alternate-color icon-next _2Cx2VFM04V1vDEfkDEJ3Cw"></span></div>
<div class="activity-item activity-container" data-css="activity-item">
<div class="activity-text" data-css="activity-text"><span>Content</span></div>
<div class="abcd">
<div class="activity-vote-count" data-css="activity-vote-count"><span>0</span><span> vote</span></div>
<div class="activity-reply-count" data-css="activity-reply-count"><span>1</span><span> reply</span></div>
<time datetime="Wed May 25 2016 15:57:21">
<span>May 25, 2016, 3:57 PM</span>
</time>
</div>
</div>
</a>
</div>
</div>
</body>
apply margins as you like..
I'm using sass in my current project and can't figure out why this won't compile :
.section {
&:first-of-type {
background: url("../img/misc/.jpg") center center no-repeat;
background-size: cover;
&--text {
&--title {
/*THIS WON'T COMPILE*/
}
&--subtitle {
/*THIS WON'T COMPILE*/
}
&--subscribe {
&--input {
/*THIS WON'T COMPILE*/
}
&--button {
/*THIS WON'T COMPILE*/
}
}
}
}
&:nth-of-type(2) {
&--text {
&--title {
/*THIS WON'T COMPILE*/
}
&--paragraph {
/*THIS WON'T COMPILE*/
}
}
}
}
I'm getting this error :
Invalid parent selector for "&--text": "Home stylesheet .section:nth-of-type(2)"
Here is my html:
<section class="section"> <!-- Cover section -->
<div class="section--text">
<h1 class="section--text--title">
Main title
</h1>
<p class="section--text--subtitle">
Some text
</p>
<div class="section--text--subscribe">
<input class="section--text--subscribe--input" type="email" placeholder="Your email">
<button class="section--text--subscribe--button">button</button>
</div>
</div>
</section>
<section class="section"> <!-- Problem section -->
<img src="img/ipad.jpg" alt="App screenshot">
<div class="section--text">
<h2 class="section--text--title">
Title
</h2>
<p class="section--text--paragraph">
Some text
</p>
</div>
</section>
Can't I apply css rules to pseudo-selectors'children using nesting? What am I missing here?
Many thanks!
You're misunderstanding the use of & to nest selectors. Your first nested selector will compile to (if it could) .section:first-of-type --text. To use your children classes you need to include the full class name (including the . selector). This should work fine:
.section {
&:first-of-type {
background: url("../img/misc/.jpg") center center no-repeat;
background-size: cover;
&.section--text {
&.section--text--title {
/*THIS WON'T COMPILE*/
}
&.section--text--subtitle {
/*THIS WON'T COMPILE*/
}
&.section--text--subscribe {
&.section--text--subscribe--input {
/*THIS WON'T COMPILE*/
}
&.section--text--subscribe--button {
/*THIS WON'T COMPILE*/
}
}
}
}
&:nth-of-type(2) {
&.section--text {
&.section--text--title {
/*THIS WON'T COMPILE*/
}
&.section--text--paragraph {
/*THIS WON'T COMPILE*/
}
}
}
}
The '&' works similarly to a space in CSS. More at:
http://sass-lang.com/documentation/file.SASS_REFERENCE.html#parent-selector
i don't want to flood my visitors display with all news, so i want to use expanders for each news. But i want to support vistors with JavaScript disabled too.
My try:
#news > .panel > .panel-heading > .panel-title > .label{
float: right;
}
#news > .panel > .panel-body {
display: none;
}
#news > .panel > panel-heading > panel-title > a:visited < .panel-title < .panel-heading < .panel > .panel-body {
display: block;
}
<div id="news" class="tab-pane active">
{% for announcement in server.announcements.all %}
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">{{ announcement.title }} <span class="label label-default">By {{ announcement.writer.get_username }} at {{ announcement.date_created }}</span></h3>
</div>
<div class="panel-body">
{{ announcement.content|safe_html }}
</div>
</div>
{% endfor %}
</div>
You need to make some changes
First, you will never (at current CSS3 capablity) be able to get what you desire using pure CSS using the :visited psuedo-class for two reasons: (1) the a element is not at the sibling level of the .panel-body, so it cannot control .panel-body through css, and (2) the :visited pseudo-class has severe restrictions on what it allows a designer to control (for privacy reasons).
So what can you do? Use :target instead.
But that will (1) limit you to allowing only one news item open at a time, and (2) requires you to set id properties on your .panel-body elements to match the href of the a tag controlling it. So you would need html structure like this:
<div id="news" class="tab-pane active">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Title 1
<span class="label label-default">By writer name</span>
</h3>
</div>
<div class="panel-body" id="Item1">
Panel 1 body
</div>
</div>
</div>
Where each a has a unique href that is tied to the id of the .panel-body of the item. Then you can get the functionality similar to what you seek by this CSS for the display:
#news > .panel > .panel-body {
display: none;
}
#news > .panel > .panel-body:target {
display: block;
}
You can see how this works in this fiddle example, and to see how it would work with multiple news items, take a look at this fiddle example.
This solution is only CSS3 compatible, so older browsers with javascript disabled would not be able to see any news items (with javascript you can use that to expand)
Graceful degradation:
I would show all news in a container with internal scrollbar (constrained in height) as in : http://jsfiddle.net/Py2HU/1/
And when JS available would add a Show/Hide button, hide N last news and show/hide them after a click (or add Previous/Next buttons to allow scrolling news one by one)
CSS
.news-wrapper {
width: 300px;
max-height: 400px;
overflow: auto;
border: 1px solid #000;
}
HTML
<div class="news-wrapper">
<ul class="news">
<li class="news-item">Lorem ipsum </li>
<li class="news-item">Lorem ipsum </li>
<li class="news-item">Lorem ipsum </li>
<li class="news-item">Lorem ipsum </li>
</ul>
</div>
Compatibility: IE7+ and easily with IE6 (as simple as .ie6 .news-wrapper { height: 400px } if anyone cares)
This answer is for people who are looking for Single expander only with CSS3.
Bootstrap reference is given only to use Glyph-icons(Up/Down).
check Plunker
HTML
<div class="expandercheckbox">
<input id="e1" type="checkbox" checked="checked" />
<label for="e1" class="expanderheader">Click me to Expand/Collpase</label>
<div class="expandercontainer">
I am in container. I am visible. Click above to make be collpase.
</div>
</div>
CSS
body{
padding:50px;
background: #484848;
color:#fff;
}
.expandercheckbox input[type="checkbox"] {
display: none;
}
.expandercheckbox .expanderheader {
cursor: pointer;
}
.expandercheckbox input[type="checkbox"] + .expanderheader {
color: #fff;
font-weight: bold;
font-size: 12px;
white-space: nowrap;
user-select:none;
-webkit-user-select:none;
}
.expandercheckbox input[type="checkbox"] + .expanderheader:before {
content: "\e113";
display: inline-block;
font: 14px/1em Glyphicons Halflings;
height: 20px;
width: 20px;
border-radius: 20px;
margin: -2px 0.25em 0 0;
padding: 1.5px 3.5px;
vertical-align: top;
background: #717171;
/* Old browsers */
}
.expandercheckbox input[type="checkbox"]:checked + .expanderheader:before {
content: "\e114";
padding: 2.5px;
}
.expandercheckbox input[type="checkbox"]:checked + .expanderheader:after {
font-weight: bold;
color:#000;
}
.expandercontainer{
background:#000;
padding:15px;
}
.expandercheckbox input[type="checkbox"]:checked ~ .expandercontainer {
display: block;
}
.expandercheckbox input[type="checkbox"]:not(:checked) ~ .expandercontainer {
display: none;
}