From the html shown below I want to select all the odd numbered, li class="items-3", then select the three descriptions of the pictures, shown highlighted below using either,
using,** span data-picture="" data-alt="Red Range Rover Evoque">, or using the img tag img alt="Red Range Rover Evoque" src="/Images/Evoque-Red-Street.
I have tried the following css:
li.items-3:first-child div:first-child a span[data-alt]:first-child
which gives me :
span data-picture="" data-alt="Red Range Rover Evoque" class=""
But I can't seem get the data-alt value, I have tried the css below but that doesn'twor either,
li.items-3:first-child div:first-child a span[data-alt]:first-child > span[data-alt>
I would be grateful if someone could suggest a solution.
Thanks
<ul class="mediaCarousel" style="text-align: left; float: none; position: absolute; top: 0px; right: auto; bottom: auto; left: 0px; margin: 0px; width: 11693px; height: 842px;">
<li class="items-3" style="width: 1063px;">
<div class="el">
<a href="/Images/Evoque-Red-Street-1200x600_tcm186-51405.jpg">
<span data-picture="" data-alt=**"Red Range Rover Evoque">**
<span data-src="/Images/Evoque-Red-Street-1200x600_tcm186-51405.jpg"></span>
<span data-src="/Images/Evoque-Red-Street-1200x600_tcm186-51405.jpg" data-media="(max-width: 400px)"></span>
<span data-src="/Images/Evoque-Red-Street-1200x600_tcm186-51405.jpg" data-media="(min-width: 1000px)">
<img alt="Red Range Rover Evoque" src="/Images/Evoque-Red-Street-1200x600_tcm186-51405.jpg">
</span>
<noscript>
<img alt="Red Range Rover Evoque" src="/Images/Evoque-Red-Street-1200x600_tcm186-51405.jpg" />
</noscript>
</span>
</a>
</div>
<div class="el width-1of2">
<a href="/Images/Evoque-Outdoor-Cinema-600x350_tcm186-51407.jpg">
<span data-picture="" data-alt="**Red Range Rover Evoque at an outdoor cinema**">
<span data-src="/Images/Evoque-Outdoor-Cinema-600x350_tcm186-51407.jpg"></span>
<span data-src="/Images/Evoque-Outdoor-Cinema-600x350_tcm186-51407.jpg" data-media="(max-width: 400px)"></span>
<span data-src="/Images/Evoque-Outdoor-Cinema-600x350_tcm186-51407.jpg" data-media="(min-width: 1000px)">
<img alt="Red Range Rover Evoque at an outdoor cinema" src="/Images/Evoque-Outdoor-Cinema-600x350_tcm186-51407.jpg">
</span>
<noscript>
<img alt="Red Range Rover Evoque at an outdoor cinema" src="/Images/Evoque-Outdoor-Cinema-600x350_tcm186-51407.jpg" />
</noscript>
</span>
</a>
</div>
<div class="el width-1of2">
<a href="/Images/Evoque-Front-View-Red-600x350_tcm186-51406.jpg">
<span data-picture="" data-alt="**Red Range Rover Evoque Front View**">
<span data-src="/Images/Evoque-Front-View-Red-600x350_tcm186-51406.jpg"></span>
<span data-src="/Images/Evoque-Front-View-Red-600x350_tcm186-51406.jpg" data-media="(max-width: 400px)"></span>
<span data-src="/Images/Evoque-Front-View-Red-600x350_tcm186-51406.jpg" data-media="(min-width: 1000px)">
<noscript>
<img alt="Red Range Rover Evoque Front View" src="/Images/Evoque-Front-View-Red-600x350_tcm186-51406.jpg" />
</noscript>
</span>
</a>
</div>
</li>
<li class="items-1" style="width: 1063px;">
<li class="items-3" style="width: 1063px;">
<li class="items-1" style="width: 1063px;">
<li class="items-3" style="width: 1063px;">
</ul>
Try with this selector:
li.items-3 span[data-alt*="Red Range Rover"] span
It's hard to make a demo with your code but here you have it http://jsfiddle.net/Y8Xr6/5/
Related
I am getting CLS ON this piece of HTML can anyone tell the reason for why iam getting a layout shift. iam trying hard to get the CLS below 0.1 but failed to do so .. i guess bootstrap classes may causing the issue but how can i fix it
<section class="page-banner Games" style="height:400px;">
<div class="new-banner-collection-page" style="padding-bottom:1rem;">
<div class="row" style="height:100%">
<div class="col-md-7" style="height:100%; float:left">
<div id="tags-new-banner" class="" style="padding-left: 32px;padding-top:17px;">
<span class="playabe-breadcrum" max-width="100%">
<a class="playabe-breadcrum js-track-ga" href="/" data-action="{"to Page":"/"}" data-category="clicked bread crumb" style="display: inline;">Home</a> >
</span>
<span class="playabe-breadcrum" max-width="100%">
<a class="playabe-breadcrum js-track-ga" href="/search_contents/preview/games" data-action="{"to Page":"/search_contents/preview/games"}" data-category="clicked bread crumb" style="display: inline;">Games</a> >
</span>
<span class="playabe-breadcrum" max-width="100%">
<a class="playabe-breadcrum js-track-ga" href="/search_contents/preview/math-games" data-action="{"to Page":"/search_contents/preview/math-games"}" data-category="clicked bread crumb" style="display: inline;">Math Games</a> >
</span>
<span class="playabe-breadcrum">Counting Games</span>
</div>
<div class="title-new-collection-page" style="">
<h1 style="font-weight:700;">
Counting Games for Kids
</h1>
</div>
<p class="less-banner-content">
<span>The first step to embracing math is learning to count. Children learn to identify, group and classify objects by counting. SplashLearn’s cool online counting games provide respite from the monotony of practice worksheets through colorful virtual manipulatives. Children develop a bond </span>
<span id="js-read-more-banner-btn" onclick="readMoreFunc()" style="color:blue;">... Read more</span>
<span id="js-read-more-banner-content" style="display:none">with numbers that will see them through advanced math in the upcoming years.</span>
</p>
<div class="signup-ctas-new-banner">
<a class="new-banner-signup-link-parent" href="/parents/register#!/parent/creation">
<button class="new-banner-signup-btn-parent">Parents, Sign Up for Free</button>
</a>
<a class="new-banner-signup-link-teacher" href="/teachers/register">
<button class="new-banner-signup-btn-teacher">Teachers, Use for Free</button>
</a>
</div>
</div>
<div class="new-banner-images col-md-5" style="float:right">
<img alt="Imge" class="" style="max-width: 100%; width: 100%;height: 100%;object-fit: contain;" src="http://localhost:8300/cms_assets/images/Common-page.jpg">
</div>
</div>
</div>
</section>
Totally puzzled by this very basic rules of giving a background color differently to odd and even to each list element (each <li>)
In the rendered html code, ALL li are seen as odd.. ??????
so they all got the same background color instead of the needed alternate one.
Thank for any help.
<div id="technotes" class="block nb-coul well">
<div class="block-in">
<ul id="blocNotesTech">
<li class="oneFile gc tips ">
<a target="_blank" rel="tooltip" href="http:xxxx.pdf" title="" data-original-title="Enregistrer ce document (nl onglet) "><strong>xxxxxxxxxxxxxxxxx </strong> »
</a> <span class="tout-pt-txt small">(0.16 Mo) </span><br>
<cite class="tout-pt-txt"><em>azertyui...</em>
</cite>
</li><br>
<li class="oneFile hplc ">
<a target="_blank" rel="tooltip" href="http:xxxx.pdf" title="" data-original-title="Enregistrer ce document (nl onglet) "><strong>xxxxxxxxxxxxxxxxx </strong> »
</a> <span class="tout-pt-txt small">(0.16 Mo) </span><br>
<cite class="tout-pt-txt"><em>azertyui...</em>
</cite>
</li><br>
<li class="oneFile gc tips ">
<a target="_blank" rel="tooltip" href="http:xxxx.pdf" title="" data-original-title="Enregistrer ce document (nl onglet) "><strong>xxxxxxxxxxxxxxxxx </strong> »
</a> <span class="tout-pt-txt small">(0.16 Mo) </span><br>
<cite class="tout-pt-txt"><em>azertyui...</em>
</cite>
</li><br>
<li class="oneFile hplc ">
<a target="_blank" rel="tooltip" href="http:xxxx.pdf" title="" data-original-title="Enregistrer ce document (nl onglet) "><strong>xxxxxxxxxxxxxxxxx </strong> »
</a> <span class="tout-pt-txt small">(0.16 Mo) </span><br>
<cite class="tout-pt-txt"><em>azertyui...</em>
</cite>
</li><br>
</ul>
</div>
and the css that applies (tried different ways):
#technotes li{
display: inline-block;
background: none;
background-position: center left!important;
padding: 43px 2px 43px 72px!important;
font-size: 130%;
border-bottom: 1px blue !important;
}
#technotes li.hplc{
background-image: url(../img/TechNoteHPLC-ico.png);
background-repeat: no-repeat;
}
#technotes li.hplc-usp{
background-image: url(../img/TechNoteHPLCUSP-ico.png);
background-repeat: no-repeat;
}
#technotes li.gc{
background-image: url(../img/TechNoteGC-ico.png);
background-repeat: no-repeat;
}
#technotes ul > li:nth-child(odd){
background-color: #f9f9f9;
}
#technotes ul > li:nth-child(even){
background-color: #ECEDE6;
}
grrr.
the <br /> outside the LIs was the issue... must be inside.
solved..
I'm trying to do a "read more" function.
I use overflow: hidden to hide contents which is bigger than the div.
The result now looks like:
I'd like to skip the image which is partly showed.
Like this:
When counter image, skip the whole image.
Then after click the "read more" button, all contents are showed.
How can I done that?
My code:
.post {
width: 800px;
height: 300px;
overflow: hidden;
background-color: #F6F8FA;
border-style: ridge;
border-width: 2px;
border-color: #F6F8FA;
padding: 15px;
margin-bottom: 30px;
margin-left: 5px;
margin-top: 30px;
}
.published-date {
float: right;
}
<div class="post">
<p class="published-date">published: Aug. 29, 2017, 12:19 p.m.</p>
<h1>
<a href="{% url 'post_detail' pk=post.pk %}">
<!--post.title-->
<u>[Django] 預設登入admin</u>
</a>
</h1>
<p>
<!--post.text-->
<p>在Django中，想要新增一個post，但卻還沒登入到admin時，或是admin中沒有你的帳號密碼時，你可能會得到瀏覽器回應這樣的錯誤： </p>
<p><img alt="" src="http://i.imgur.com/4cJUlK7.png?3" />
<br></p>
<p>手動登入admin（localhost:8000/admin）可能可以解決這個問題： </p>
<p><img alt="" src="http://i.imgur.com/Xfbghkx.png" />
<br><br></p>
<p>這時候如果能夠每次都自動登入，就會方便很多。<br /> 而Django在 <code>django.contrib.auth</code> 也提供了一些方法<br /> 以下條件預設登入的user只會有一個（就是我）
<br />
<br> 新增一個 <code>user.py</code> </p>
<div class="codehilite">
<pre><span></span><span class="k">class</span> <span class="nc">UserInfo</span><span class="p">():</span>
<span class="n">username</span> <span class="o">=</span> <span class="p">{</span><span class="n">enter</span> <span class="n">your</span> <span class="n">username</span><span class="p">}</span>
<span class="n">password</span> <span class="o">=</span> <span class="p">{</span><span class="n">enter</span> <span class="n">your</span> <span class="n">password</span><span class="p">}</span>
</pre>
</div>
<p><br> 在 <code>views.py</code> 中，import <code>authenticate</code> , <code>login</code> 。記得也要將自己的user資訊加進來：</p>
<div class="codehilite">
<pre><span></span><span class="kn">from</span> <span class="nn">django.contrib.auth</span> <span class="kn">import</span> <span class="n">authenticate</span><span class="p">,</span> <span class="n">login</span>
<span class="kn">from</span> <span class="nn">.user</span> <span class="kn">import</span> <span class="n">UserInfo</span>
<span class="k">def</span> <span class="nf">post_list</span><span class="p">(</span><span class="n">request</span><span class="p">):</span>
<span class="n">user</span> <span class="o">=</span> <span class="n">authenticate</span><span class="p">(</span><span class="n">username</span> <span class="o">=</span> <span class="n">UserInfo</span><span class="o">.</span><span class="n">username</span><span class="p">,</span> <span class="n">password</span> <span class="o">=</span> <span class="n">UserInfo</span><span class="o">.</span><span class="n">password</span><span class="p">)</span>
<span class="n">login</span><span class="p">(</span><span class="n">request</span><span class="p">,</span> <span class="n">user</span><span class="p">)</span>
<span class="p">{</span><span class="o">...</span><span class="n">your</span> <span class="n">code</span><span class="p">}</span>
</pre>
</div>
<p><br> 在程式執行到 <code>post_list()</code> 的時候就會自動登入，屢試不爽。</p>
<p><br><br> 這樣的寫法把user的帳密分開成一個檔案寫，若要提交到遠端repo，可以直接略過（.gitignore）含有user資訊的檔案，以免公開。
</p>
</p>
<a href="/post/32/"></p>
<a href="{% url 'post_detail' pk=post.pk %}">
<button type="button" class="show-more-btn">more...</button>
</a>
<!--end post.text-->
</div>
post.title and post.text are the title and text content.
You can do this with a jquery function.
$('.show-more-btn').click(function(){
$('.post').animate({height:'100%'}, 500);
});
Basically, once you click on the "more..." button, you add a height:100% to the .post
See the example below.
https://jsfiddle.net/st6ys7tt/9/
Issue
I'm trying to design a basic calendar layout using HTML/CSS. Another application would be an image gallery. The point is, I want to be able to set the row "width" in columns using just CSS, but it is not working.
This is the desired calendar look I'm trying to achieve with CSS:
NOTE: The most promising work-around I have found is to wrap an inline-block unordered list in a container div, and set the width of the div so that it gives you the desired row length. However, this is not a sufficient solution for my purposes. It doesn't address insert a line break to manually split rows.
My code
Version 1
This version of my calendar works, but it uses fixed <br> tags in the HTML, which doesn't allow for easily changing a number in the CSS to change the row width.
span.cell {
display: table-cell;
border-collapse: collapse;
height: 2.2em;
border: solid black 1px;
width: 30px;
}
span.cell:nth-child(8n+7) {
background-color: yellowgreen;
}
br {
content: "";
margin: 0;
}
<span class='cell'>1 </span>
<span class='cell'>2 </span>
<span class='cell'>3 </span>
<span class='cell'>4 </span>
<span class='cell'>5 </span>
<span class='cell'>6 </span>
<span class='cell'>7 </span>
<br>
<span class='cell'>8 </span>
<span class='cell'>9 </span>
<span class='cell'>10 </span>
<span class='cell'>11 </span>
<span class='cell'>12 </span>
<span class='cell'>13 </span>
<span class='cell'>14 </span>
<br>
<span class='cell'>15 </span>
<span class='cell'>16 </span>
<span class='cell'>17 </span>
<span class='cell'>18 </span>
<span class='cell'>19 </span>
<span class='cell'>20 </span>
<span class='cell'>21 </span>
<br>
<span class='cell'>22 </span>
<span class='cell'>23 </span>
<span class='cell'>24 </span>
<span class='cell'>25 </span>
<span class='cell'>26 </span>
<span class='cell'>27 </span>
<span class='cell'>28 </span>
<br>
<span class='cell'>29 </span>
<span class='cell'>30 </span>
<span class='cell'>31 </span>
Version 2
Version 2 attempts to accomplish the same using pure CSS, but so far, has been unsuccessful. Here are a few of the challenges with this attempt:
Here is the incorrect result I am getting with this version:
The spans display inline even though I have display: table-cell set.
Here we are using span.cell:nth-child(8n):after to insert a blank line, as per this post (but it isn't working): Line break (like <br>) using only css
Have tried Chrome, Firefox, and IE, all to no avail.
span.cell {
display: table-cell;
border-collapse: collapse;
height: 2.2em;
border: solid black 1px;
}
span.cell:nth-child(7n) {
background-color: yellowgreen;
}
span.cell:nth-child(8n):after {
content: "\a";
white-space: pre;
}
br {
content: "";
margin: 0;
}
<div id="cal1">
<span class='cell' style='width:30px'>1 </span>
<span class='cell' style='width:30px'>2 </span>
<span class='cell' style='width:30px'>3 </span>
<span class='cell' style='width:30px'>4 </span>
<span class='cell' style='width:30px'>5 </span>
<span class='cell' style='width:30px'>6 </span>
<span class='cell' style='width:30px'>7 </span>
<span class='cell' style='width:30px'>8 </span>
<span class='cell' style='width:30px'>9 </span>
<span class='cell' style='width:30px'>10 </span>
<span class='cell' style='width:30px'>11 </span>
<span class='cell' style='width:30px'>12 </span>
<span class='cell' style='width:30px'>13 </span>
<span class='cell' style='width:30px'>14 </span>
<span class='cell' style='width:30px'>15 </span>
<span class='cell' style='width:30px'>16 </span>
<span class='cell' style='width:30px'>17 </span>
<span class='cell' style='width:30px'>18 </span>
<span class='cell' style='width:30px'>19 </span>
<span class='cell' style='width:30px'>20 </span>
<span class='cell' style='width:30px'>21 </span>
<span class='cell' style='width:30px'>22 </span>
<span class='cell' style='width:30px'>23 </span>
<span class='cell' style='width:30px'>24 </span>
<span class='cell' style='width:30px'>25 </span>
<span class='cell' style='width:30px'>26 </span>
<span class='cell' style='width:30px'>27 </span>
<span class='cell' style='width:30px'>28 </span>
<span class='cell' style='width:30px'>29 </span>
<span class='cell' style='width:30px'>30 </span>
<span class='cell' style='width:30px'>31 </span>
</div><!-- END #cal1 div -->
What I've tried that hasn't worked
I found the following links in my search, but none of them provide a working solution (although many of them purported to or came close):
Line break (like <br>) using only css
Adding a line break between two inline elements | CoderWall
Injecting a Line Break | CSS-Tricks
An inline-block intervention | Really Good Work!
Should You Use Inline-Blocks As A Substitute For Floats? | Vanseo Design
How to break an inline-block row | CSS Creator
How To Make a Calendar using CSS | W3Schools
My questions
Is what I'm trying to do possible (split a row of spans or an unordered list without using a container div, or adding extra markup, using only CSS)? If not, why? If so, how?
As jameswassinger posted, it can be done with floats.
Since you want it injected via CSS, here is a snippet doing so
Remember that
clear left: Requires that the top border edge of the box be below the bottom
outer edge of any left-floating boxes that resulted from elements
earlier in the source document.
w3c reference
span.cell {
float: left;
height: 2.2em;
border: solid black 1px;
}
span.cell:nth-child(7n) {
background-color: yellowgreen;
}
span.cell:nth-child(7n+1) {
clear: left;
}
<div id="cal1">
<span class='cell' style='width:30px'>1 </span>
<span class='cell' style='width:30px'>2 </span>
<span class='cell' style='width:30px'>3 </span>
<span class='cell' style='width:30px'>4 </span>
<span class='cell' style='width:30px'>5 </span>
<span class='cell' style='width:30px'>6 </span>
<span class='cell' style='width:30px'>7 </span>
<span class='cell' style='width:30px'>8 </span>
<span class='cell' style='width:30px'>9 </span>
<span class='cell' style='width:30px'>10 </span>
<span class='cell' style='width:30px'>11 </span>
<span class='cell' style='width:30px'>12 </span>
<span class='cell' style='width:30px'>13 </span>
<span class='cell' style='width:30px'>14 </span>
<span class='cell' style='width:30px'>15 </span>
<span class='cell' style='width:30px'>16 </span>
<span class='cell' style='width:30px'>17 </span>
<span class='cell' style='width:30px'>18 </span>
<span class='cell' style='width:30px'>19 </span>
<span class='cell' style='width:30px'>20 </span>
<span class='cell' style='width:30px'>21 </span>
<span class='cell' style='width:30px'>22 </span>
<span class='cell' style='width:30px'>23 </span>
<span class='cell' style='width:30px'>24 </span>
<span class='cell' style='width:30px'>25 </span>
<span class='cell' style='width:30px'>26 </span>
<span class='cell' style='width:30px'>27 </span>
<span class='cell' style='width:30px'>28 </span>
<span class='cell' style='width:30px'>29 </span>
<span class='cell' style='width:30px'>30 </span>
<span class='cell' style='width:30px'>31 </span>
</div><!-- END #cal1 div -->
I believe you can achieve the desired look and effects you want by floating the cell elements to the left. To achieve the "line break" via CSS use the clear attribute clear: both;
Here is a jsFiddle example.
Let me know if this answer helps.
.day {
float: left;
display: table-cell;
border-collapse: collapse;
height: 2.2em;
border: solid black 1px;
width: 30px;
}
.colored {
background: #8AC627;
}
.clear {
clear: both;
}
<span class="day">1</span>
<span class="day">2</span>
<span class="day">3</span>
<span class="day">4</span>
<span class="day">5</span>
<span class="day">6</span>
<span class="day colored">7</span>
<div class="clear"></div>
<span class="day">8</span>
<span class="day">9</span>
<span class="day">10</span>
<span class="day">11</span>
<span class="day">12</span>
<span class="day">13</span>
<span class="day colored">14</span>
<div class="clear"></div>
<span class="day">15</span>
<span class="day">16</span>
<span class="day">17</span>
<span class="day">18</span>
<span class="day">19</span>
<span class="day">20</span>
<span class="day colored">21</span>
<div class="clear"></div>
<span class="day">22</span>
<span class="day">23</span>
<span class="day">24</span>
<span class="day">25</span>
<span class="day">26</span>
<span class="day">27</span>
<span class="day colored">28</span>
<div class="clear"></div>
<span class="day">29</span>
<span class="day">30</span>
<span class="day">31</span>
I'm currently trying to edit the RES userbar for my subreddit. It looks like this:
It also collapses.
I want to float almost all of the elements to the right so that they are lined up vertically. The html for the bar is:
<div id="header-bottom-right" class="res-navTop">
<div id="userbarToggle" title="Toggle Userbar" class="userbarHide">»</div>
<span class="user">
<a href="http://www.reddit.com/user/snowe2010/" style="margin-right: 2px;">
snowe2010
</a>
<span id="RESAccountSwitcherIcon"></span>
(
<span class="userkarma" title="">
<a title="link karma" href="/user/snowe2010/submitted/">9</a>
·
<a title="comment karma" href="/user/snowe2010/comments/">
2170
</a>
</span>
)
</span>
<span class="separator">|</span>
<a title="no new mail" href="http://www.reddit.com/message/inbox/" class="nohavemail" id="mail"></a>
<a id="mailCount" href="/message/unread/"></a>
<span class="separator">|</span>
<a title="no new mod mail" href="http://www.reddit.com/message/moderator/" class="nohavemail" id="modmail">mod messages</a>
<span class="separator">|</span>
<ul class="flat-list hover">
<li>
preferences</li>
</ul>
<span class="separator">|</span>
<span id="openRESPrefs">
<span id="RESSettingsButton" title="RES Settings" class="gearIcon newNotification">
</span>
</span>
<span class="separator">|</span>
<form method="post" action="/logout" class="logout hover">
<input type="hidden" name="uh" value="zoimwqbhhl59526448277e691374c3d0bc47706bb35d0045b9">
<input type="hidden" name="top" value="off">
logout
</form>
</div>
I've currently tried setting each element to a block and then floating right, but that isn't working. I've also tried setting them to display: table-cell; and aligning it, but that isn't working either.
Can anybody help me with this?
#header-bottom-right a {
display: block;
float: right;
}
#header-bottom-right .separator { display: none; }
This is a pretty unrefined approach, but it's a starter. There's plenty of room for smoothing out the rough edges if you want to continue with this approach.