css - how do I select .class-a:nth-child only when it also has class .class-b -


i have grid of images. within grid have albums. albums displayed single image (images-album-cover) until expanded, after entire album displayed among rest of images (images-album-images).

both images-album-cover , images-album-image have class images-image-col. images-image-col class of rest of non-album images.

i've added border (with div, not actual border) bottom of each album image indicate images part of album.

i need able few things:

select each images-album-cover or images-album-image on left side of grid.

select each images-album-cover or images-album-image on right side of grid.

select each images-album-image last image in album.

so far have been able select left images , right images when grid has non-album images, i'm @ loss of how handle albums when need it. not unable select nth-child when matches class, when grid has albums in @ nth-child stops working no albums though i'm trying target images (images-image-col)

heres fiddle of working (on large screens) without albums.

as started albums, haven't been able select first images-album-cover, tried this:

&:nth-child(2n+1) {   .images-album-cover {     outline: 1px dashed mediumvioletred;   } }

and doesn't seem anything

here html album

<div class="col-xs-6 col-sm-4 images-image-col images-album-cover open">   <a class="thumbnail image images-image-thumbnail">     <img>     <div class="album-label">       <figcaption>asdfasf <span>(5)</span></figcaption>     </div>   </a>   <div class="images-album-cover-bar"></div> </div> <span id="gallery-detail-22">   <div class="col-xs-6 col-sm-4 images-image-col images-album-image">     <a class="thumbnail image images-image-thumbnail">       <img>     </a>     <div class="images-album-image-bar"></div>   </div>   <div class="col-xs-6 col-sm-4 images-image-col images-album-image">     <a class="thumbnail image images-image-thumbnail">       <img>     </a>     <div class="images-album-image-bar"></div>   </div>   <div class="col-xs-6 col-sm-4 images-image-col images-album-image">     <a class="thumbnail image images-image-thumbnail">       <img>     </a>     <div class="images-album-image-bar"></div>   </div>   <div class="col-xs-6 col-sm-4 images-image-col images-album-image">     <a class="thumbnail image images-image-thumbnail">       <img>     </a>     <div class="images-album-image-bar"></div>   </div>   <div class="col-xs-6 col-sm-4 images-image-col images-album-image">     <a class="thumbnail image images-image-thumbnail">       <img>     </a>     <div class="images-album-image-bar"></div>   </div> </span>

i'm open js solution if guys think better in case i'd still know if possible.

try this:

:nth-child(2n+1).images-album-cover {     outline: 1px dashed mediumvioletred; }

Comments

Post a Comment

Popular posts from this blog

ubuntu - PHP script to find files of certain extensions in a directory, returns populated array when run in browser, but empty array when run from terminal -

i running os ububtu 16.04. ultimate goal able run php script cron job every minute. here php script located @ /var/www/html/tests/test/index.php : <?php $directorypath = $_server['document_root']."/tests/test/data/"; echo "directorypath: $directorypath<br><br>";//check $imagefilepathsarray = glob($directorypath . "*.{png,gif}", glob_brace); echo "<br><br>imagefilepathsarray: "; print_r($imagefilepathsarray);//check ?> when open php script in browser visiting url my-ip-address/tests/test/index.php , get: directorypath: /var/www/html/tests/test/data/ imagefilepathsarray:array( [0] => /var/www/html/tests/test/data/pic.png [1] => /var/www/html/tests/test/data/pic.gif ) before writing cron job in crontab file, need check if can run anywhere using terminal . opened ubuntu terminal @ /home/ location, , executed in terminal: sudo php /var/www/html/tests/test/index.php i got following out...
Read more

php - How can i create a user dashboard -

today have questions you, want create user dashboard site, include (obviously), users data, example -email -username -and others stuff how can information, , print them in html page? if can, how can these information via php sessions? shuld use session? example, if user login, , start new session ( session_start() ), how can data print in dashboard? should use php "project"? in advice, have day , thank time!
Read more

javascript - How to detect toggling of the fullscreen-toolbar in jQuery Mobile? -

i have jquery mobile page fixed full-screen toolbar, data-tap-toggle enabled. straight under toolbar have positioned banner should slide upwards when toolbar hiding , slide downward when toolbar showing. jquery mobile toggles toolbar applying , removing ui-fixed-hidden class - sadly, can't find in documentation of toolbar widget toggle , hide or show event that. how can detect when toolbar toggled, reposition banner? .banner { position: fixed; background-color: darkseagreen; top: 46px; min-height: 48px; width: 100%; text-align: center; line-height: 48px; } <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"> <script src="https://code.jquery.com/jquery-1....
Read more