I want to add some css rules to .container.picture but only in .medium-width.
HTML is:
<div class="block medium-width">
<div class="container picture">
<img src="img/car4.png" title="Car">
</div>
<div class="container text">
</div>
</div>
CSS is:
.medium-width > .container.picture
{
width: 50%;
float: left;
}
Is something wrong in this selector?
No.
You may have other rules applied, or a context that prevent this selector from working.
But here, selector's right
Related
I have a below div structure and I want to add css on first .column element, not its sibling
<div class="row" id="team">
<div class="column">
<div class="row">
<div class="column">
A
</div>
<div class="column">
B
</div>
<div class="column">
C
</div>
</div>
</div>
</div>
I want to add CSS only first .column that comes just after #team div. So how can I select a class for that .column not for the inner .column?
You would use the direct descendant / child combinator ">" which in effect says - target the .column class that DIRECTLY descends from the #team parent div.
In the following - I am placing a border around the targetted .column div and not around the nested children .column divs.
and if there are other divs that are siblings of that particvular div - then you could use the :first-child pseudo selector as well..
#team > .column:first-child {...}
which says - target the .column div that is a direct descendant AND the first child of the #team div.
#team > .column {
border: solid 1px red;
}
<div class="row" id="team">
<div class="column">
<div class="row">
<div class="column">
A
</div>
<div class="column">
B
</div>
<div class="column">
C
</div>
</div>
</div>
</div>
The most specific selector in this case is #team>.column, with > between parent and child to make sure the nested divs which also have the .column class are not affected.
#team .column would not work in this case, since it also selects the .column divs which are nested in lower instances.
BTW: You mention "siblings", which is a bit confusing, since there are not any siblings to that element...
#team>.column {
background: yellow;
}
<div class="row" id="team">
<div class="column">
<div class="row">
<div class="column">
A
</div>
<div class="column">
B
</div>
<div class="column">
C
</div>
</div>
</div>
</div>
Ok, so I think you may have confused your HTML 'parent/child' structure.
You could use
#team > .column:first-child {
}
However, I don't know if you are aware that you can add any number of classes to HTML elements. You could have many classes to easily distinguish between your components and to be able to grab hold of them with CSS or JS.
For the sake of ease, you could just add another class to the element you want to add another separate class style, as I have below.
Then you could just add CSS styling for that class.
<div class="row" id="team"> //this is parent
<div class="column main"> // a child that I've added the
// class of .main to
<div class="row"> // a grandchild
<div class="column"> // then great grandchildren
A //these are siblings
</div>
<div class="column"> //these are siblings
B
</div>
<div class="column"> //these are siblings
C
</div>
</div>
</div>
</div>
/*Then you would just add stylings for*/
.main {
}
Html:
<footer id="colophon"
class="site-footer footer
bg-dark" role="contentinfo">
<div class="container
footer-inner">
<div class="row">
<div class="footer-widget-
area"><div class="col-md-3
col-sm-6 footer-widget"
role="complementary">
<div id="text-4"
class="widget widget_text">
<div class="textwidget"><p>.
<a href="http://4309.co.uk/
contact/">Contact</a></p>
</div>
</div></div>
Tried css:
.page-id-3748>.site-
footer{position:relative
!important;top: 100px!
important;}
Trying to target footer on one page only. I know the selector is site-footer but I'm trying to do it with specificity.
Try to remove the ">" sign inside your CSS.
.page-id-3748 .site-footer {
position:relative !important;
top: 100px! important;
}
Use !important only if nothing else will work.
Because an id has an higher priority you can use
.page-id-3748 #colophon { }
or combining 2 class selectors will also give you more priority.
.page-id-3748 .site-footer.footer { }
or use tags to give it more priority
.page-id-3748 footer.site-footer { }
If you have used the !important elsewhere on site-footer, then nothing here will work. Also if you have overruled the .site-footer on aother place in your styling this will not wordk.
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 5 years ago.
I'm not sure if this can be done entirely with CSS (imperative), but it's halfway working at the moment. I have this current HTML setup:
<div class="content">
<div>
<div class="image"></div>
</div>
<div class="text"></div>
<div class="text"></div>
<div>
<div class="button"></div>
</div>
<div>
<div class="image"></div>
</div>
</div>
My current CSS hides all of the child elements of ".content" that don't have a class.
.content > *:not([class]):first-child {
display:block;
}
Of the remaining 3 visible class child elements of ".content", I need to hide them all except the first child element that has the grandchild element with the ".image" class. This is the CSS I have, but it's not working:
.content > *:not([class]):not(.image):first-child {
display:block;
}
It's imposible on CSS. You tryed not show parent element by attribute of child. CSS so does not work. But you can small js for this:
document.querySelector(".image").parentNode.style.display = "block";
.content>div {
display: none;
}
<div class="content">
<div>
<div class="image">1</div>
</div>
<div class="text">2</div>
<div class="text">3</div>
<div>
<div class="button">4</div>
</div>
<div>
<div class="image">5</div>
</div>
</div>
Andrey’s answer is good, however if you don’t want to use JS I think you will need to have a class on the intermediary children as well since the entire tree to the element you want must be visible. That is, if any parent of the element you want to show is hidden then the children will be too. Something like this might do:
<div class="content">
<div>
<div class="image"></div>
</div>
<div class="text"></div>
<div class="text"></div>
<div>
<div class="button"></div>
</div>
<div class="visible">
<div class="image"></div>
</div>
</div>
.content > * {
display: none;
}
.content > .visible {
display: block;
}
I'm trying to center an img in a div without success and I have tried many CSS hacks. I'm missing something and I have no idea what I'm doing wrong.
Markup
<div class="col-md-6">
<div class="row">
<div class="col-md-4" >
<div class="img-guarantee">
<img src='img/clock.png' class='img-responsive'>
</div>
</div>
</div>
</div>
CSS
.img-guarantee img{
display: inline-block;
margin: 0 auto;
}
First of all, using a column outside a row is not advised whatsoever. I take it that you use Bootstrap so it's only appropriate to use a column within a row.
Secondly, you can create another class by the name .text-center, add the CSS rule: text-align: center; and finally add the newly created class to the parent element which in this case is <div class="col-md-4">
This is the final result: https://jsfiddle.net/ydeeLLrd/1/ (including a fix to the first issue)
This should work:
.img-guarantee img{
margin: 0 auto;
}
.img-guarantee {
text-align: center;
}
<div class="col-md-6">
<div class="row">
<div class="col-md-4" >
<div class="img-guarantee">
<img src='img/clock.png' class='img-responsive'>
</div>
</div>
</div>
Trying to select the 2nd 'column-left' by using only CSS, changing HTML is not an option. :nth-of-type(2) is selecting both of the div's
<div class="collection">
<div class="column-left">
</div>
<div class="column-left">
</div>
</div>
Use nth-child() selector to get the desired result
change your CSS to this:
.column-left:nth-child(2) {
color: red;
}
This link will explain the difference between nth-child selector and nth-of-type:
Link
Just use nth-child(n) instead of nth-of-type
.collection .column-left:nth-child(2) {
color: red;
}
<div class="collection">
<div class="column-left">
123
</div>
<div class="column-left">
456
</div>
</div>