in HTML I have the following structure:
<div class="row" id="info-section">
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel panel-default">
<div class="panel-heading"><h4>Calendario Eventi</h4></div>
<div class="panel-body">
<?php
// 'My_Widgtet_Area' area, where the id is called:
if (is_active_sidebar('calendar_widget_zone')) : ?>
<div id="widget-sidebar">
<ul>
<?php dynamic_sidebar('calendar_widget_zone'); ?>
</ul>
</div><!-- #widget-sidebar .widget-area -->
<?php endif; ?>
</div>
</div>
</div>
</div>
And now, using CSS I want select (to change a value) of the .panel-heading class that is into the #info-section div
What can I do to select only the .panel-heading item nested into #info-section div?
Tnx
Andrea
You can either use the nested or the in selector:
#info-section .panel-heading {
/* css */
}
or you can use the child selector (which means that it should be inside the container, not inside of one of their children)
#info-section > .panel-heading {
/* css */
}
Simply use the CSS selector:
#info-section .panel-heading{
//css stuff here
}
Follow the yellow brick road :)
CSS
#info-section .panel-heading {
/* CSS STYLES */
}
CSS
#info-section .panel-heading{
//Your Style
}
Related
For instance in the code
<div class="ofChildClass">
<div class="other1">
<div class="other2">
<div class="ofStopClass">
<div class="other3">
<div class="other4">Text</div>
</div>
</div>
</div>
<div class="other5"></div>
<div class="ofStopClass"></div>
</div>
</div>
</div>
The elements I would want to select are marked selected, and the elements I do not want selected are marked unselected.
<div class="ofChildClass" unselected>
<div class="other1" selected>
<div class="other2" selected>
<div class="ofStopClass" unselected>
<div class="other3" unselected>
<div class="other4" unselected>Text</div>
</div>
</div>
</div>
<div class="other5" selected></div>
<div class="ofStopClass" unselected></div>
</div>
</div>
</div>
Is it possible to make a selector, or multiple selectors that would select these elements without bruteforce.
To put the question into code is it possible to do this
.ofChildClass > :not(.ofStopClass),
.ofChildClass > :not(.ofStopClass) > :not(.ofStopClass),
.ofChildClass > :not(.ofStopClass) > :not(.ofStopClass) > :not(.ofStopClass),
.ofChildClass > :not(.ofStopClass) > :not(.ofStopClass) > :not(.ofStopClass) > :not(.ofStopClass)
...
without needing to repeat.
Not sure what kind of CSS you want to apply but this behavior can be defined using CSS variables like below:
:root {
--c:initial; /* we start by initial (nothing defined, default value)*/
}
div {
outline:4px solid;
outline-color:var(--c);
padding:10px;
margin:5px;
}
div::before {
content:attr(class);
}
/* we define the color here */
.ofChildClass > * {
--c:red;
}
/* we reset the coloration again here*/
.ofStopClass {
--c:initial;
}
<div class="ofChildClass">
<div class="other1">
<div class="other2">
<div class="ofStopClass">
<div class="other3">
<div class="other4">Text</div>
</div>
</div>
</div>
<div class="other5"></div>
<div class="ofStopClass"></div>
</div>
</div>
What I understood from your question is that you need to target divs that are marked selected only. You can do this by a code like this:
div[selected]{
color: blue;
}
div{
color: initial;
}
This code target all the divs that have a selected attribute given to them. As the color property is 'inherited', I had to revert color of all the divs to initial. This is just an example, otherwise div[selected] will select all the marked divs.
I've got a menu with 3 levels of deepness. It starts with the categories, then the subcategories, and after all, the final links. Some of these links are already in the second or even the first level, but that's not a problem. The menu is working fine.
The problem is that I'm trying to make it look fancy, so I added to each div a class that designates the menu level. You can see the full Angular template here. Mind that these classes are the "lvl0", "lvl1", "lvl2":
<div class="menu-container">
<div class="row header">
<img class="logo" src="../../../assets/menu-header.PNG">
</div>
<div class="row menu-btn">
<div class="inner-menu-btn" (click)="openMenu()">
<span class="menu-span" [#menuStringAnim]="active">MENU</span>
<i class="fa fa-bars menu-icon" [#menuIconAnim]="active"></i>
</div>
</div>
</div>
<div class="menu-list" [#menuListAnim]="active">
<div class="row row-fix lvl0" *ngFor="let category of getCategories()" (click)="openCategory(category)">
<div class="little-menu-bar-toplvl" *ngIf="categoriesNavigator.lvl0 == category.key"></div>
<span class="menu-top-level">{{ category?.title?.toUpperCase() }} </span>
<div *ngIf="categoriesNavigator.lvl0 == category.key">
<br>
<div class="row row-fix lvl1" *ngFor="let subcategory of getSubcategories(category.key)" (click)="openSubcategory(subcategory)">
<div class="little-menu-bar-midlvl"></div>
<span class="menu-second-level">{{ subcategory?.title?.toUpperCase() }} </span>
<div *ngIf="categoriesNavigator.lvl1 == subcategory.key">
<br>
<div class="row row-fix lvl2" *ngFor="let thirdLevel of getThirdLevel(category.key, subcategory.key)" (click)="openUrl(thirdLevel)">
<div class="little-menu-bar-lowlvl" *ngIf="categoriesNavigator.lvl0 == category.key"></div>
<span class="menu-third-level">{{ thirdLevel?.title?.toUpperCase() }} </span>
</div>
</div>
</div>
</div>
</div>
</div>
So these classes are very simple. I'm not very good at CSS (I prefer designing logic rather than designing), and maybe I'm doing some stupid thing here:
.lvl0 :hover{
color: orange;
}
.lvl1 :hover{
color: orange;
}
.lvl2 :hover{
color: orange;
clear: both;
}
So the behavior works nice for first level, but as you can see, all the rows with the second level get highlighted instead of just the one I'm hovering on:
Same happens with the third level.
Do you have any idea on what I'm doing wrong? I'm adding the Angular tag just in case it has something to do with my template code. Thank you!
The problem is that you have applied the style to your div and as the divs are nested, the styles will cascade and turn everything inside it the colour - you can try to apply the styles directly to the spans to avoid this. Also I have removed the space before your hover colon
.lvl0:hover>span { /* leave hover on div but style the span */
color: orange;
}
.lvl1:hover>span {
color: red;
}
.lvl2:hover>span {
color: green;
}
<div class="lvl0">
<span>test 0</span>
<div class="lvl1">
<span>test 1</span>
<div class="lvl2">
<span>test 2</span>
</div>
</div>
</div>
The :hover is basically propagating down to other levels. Do not use CSS on the parent directly. Instead, use it on something like span etc.
Check pen here to solve your issue. In your case, you can have <div> tag too instead of the span which closes there and is basically a sibling of next level.
.lvl:hover {
//common for all
color: orange;
}
I have a white space appearing between the two div elements
col3-2 and the_content which I have been unable to resolve.
Visit site here
You can see the white gap between the image, and the green element.
HTML - PHP:
<div id="imageslider" class="clearfix">
<?php echo do_shortcode('[advps-slideshow optset="1"]'); ?>
</div>
<div class="col3-2">
<div id="content" class="clearfix">
<?php
$args = array( 'pagename' => 'home' );
$the_query = new WP_Query( $args );
while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="the_content">
<?php the_content(); ?>
<?php edit_post_link(__('Click to edit this content','themify'), '[', ']'); ?>
</div>
<?php endwhile; wp_reset_query();?>
</div>
</div>
CSS:
.col3-2
{
float: left;
margin-left: 0%;
}
.col3-2 {
width: 100%;
font-family: 'Titillium Web', sans-serif;
}
.col3-2 h1 {
margin-right: 20px;
font-size:300%;
}
.the_content{
display: none;
}
#content {
float: left;
padding: 0 0 0%;
width: 100%;
}
The problem lies in an extraneous <p> tag appearing in the div.the_content tag:
<div class="col3-2">
<div id="content" class="clearfix">
<div class="the_content">
<p></p>
...
It looks like you're pulling this in from somewhere else, so editing the code you posted probably won't help much. Simply remove the <p></p> from the source of the content.
As stated in a previous answer, the problem is due to the p element in the code snippet:
<div id="imageslider" class="clearfix">
...
</div>
<div class="col3-2">
<div id="content" class="clearfix">
<div class="the_content">
<p></p> <!-- this causes the problem... -->
<div id="section1">
<p></p>
...
Removing the p could solve the problem, but since the content can be edited in the future (Wordpress is the CMS in this case), then the p could reappear if the user editing the content inserts an extra carriage return or two in a WYSIWIG inline editing window.
The issue is due to collapsing margins between the p (and the containing blocks such as .the_content) and #imageslider.
A better fix would be to force the .the_content block to start a new block formatting context, which can be triggered by using:
.the_content {
overflow: auto;
background-color: #17C2A4;
}
If you specify the background color on .the_content in addition to or instead of on #section1, then the background color will extend all the way to the bottom edge of the #imageslider block.
Reference: http://www.w3.org/TR/CSS21/visuren.html#block-formatting
I want to change the background color of last nested element. I am using following css but it is not working
.cd-timeline > .year-wrapper > .cd-timeline-block:last-of-type{
background-color:red;
}
i also tried
#cd-timeline .year-wrapper .cd-timeline-block:last-of-type{
background-color:red;
}
What am i doing wrong can we use last-of-type element with class
Fiddle http://fiddle.jshell.net/shfh0x63/2/
<div class="timeline-wrapper">
<div class="cd-container" id="cd-timeline">
<div class="year-wrapper">
<div class="cd-timeline-block">1</div>
<div class="cd-timeline-block">2</div>
<div class="cd-timeline-block">3</div>
</div>
<div class="year-wrapper">
<div class="cd-timeline-block">4</div>
<div class="cd-timeline-block">5</div>
</div>
<div class="year-wrapper">
<div class="cd-timeline-block">6</div>
<div class="cd-timeline-block">7</div>
<div class="cd-timeline-block">8</div>
<div class="cd-timeline-block">change background color of this only</div>
</div>
</div>
</div>
You have use undefined selector (.cd-timeline instead of #cd-timeline - in HTML you have ID, not class). Then you need to add last-of-type to .year-wrapper too
#cd-timeline > .year-wrapper:last-of-type > .cd-timeline-block:last-of-type{ background-color:red;}
^ ^^^^^^^^^^^^^
http://fiddle.jshell.net/shfh0x63/3/
This is the easiest way of doing it using :last-child
(Demo)
.year-wrapper:last-child .cd-timeline-block:last-child {
background-color: red;
}
I am using the DigG Digg Social Media Plugin for Wordpress using the manual code option:
My HTML is the following but this is not much use as its generated via PHP - I have implemented the media class and the boxes!
What my main issue is how can I get all the icons aligned via the same height?
Live URL
HTML:
<div class="diggSocialMedia">
<div class="box0">
<?php dd_fbshare_generate('Compact') ?>
</div>
<div class="box1">
<?php dd_twitter_generate('Compact','hakatours') ?>
</div>
<div class="box2">
<?php dd_fblike_generate('Like Button Count') ?>
</div>
<div class="box3">
<?php dd_google1_generate('Compact') ?>
</div>
</div>
.diggSocialMedia > div {
vertical-align:top;
}
.diggSocialMedia {
height: 0;
overflow: visible;
}