Example:
<style> div.Style1 div img { border: 3px red solid } </style>
...
<div class="Style1" id="divMain">
<img src="http://someurl.com/someimg.jpg" /> <!--WON'T be styled-->
<div id="divSub">
<img src="http://someurl.com/someimg.jpg" /> <!--WILL be styled-->
</div> <!--End of divSub-->
</div> <!--End of divMain-->
Yes. This CSS:
div.Style1 div img {
border: 3px red solid;
}
says: apply border: 3px red solid; to all img elements within a div element, which are in turn in in another div that has Style1 as a class.
Here's a jsfiddle to demonstrate:
http://jsfiddle.net/WZ3rk/
Try this, it selects only images that are children of a div that are themselves children of the element with class Style1.
.Style1 > div > img {
border: 3px red solid
}
Yes, it is possible - try it out. Although I would use
div.Style1 div.divSub img { ... }
Related
When the .post-item <div> is hovered I want to execute some specific styles (change background-color and cursor) but I don't want this to happen if the .rating-wrapper <div> is hovered too. This happens because I want the .rating-wrapper to do something different than the hover of its parent. Basic question: How to do only child's hover, ignoring the parent's hover
HTML:
<div class="post-item">
<div class="rating-wrapper">
<div class="upvote">
<img src="/images/upvote_arrow.png" alt="upvote" />
</div>
<div class="rating"></div>
<div class="downvote">
<img src="/images/downvote_arrow.png" alt="downvote" />
</div>
</div>
<span class="owner-data">
<img src="" alt="" class="owner-avatar" />
<span class="owner-username"></span>
</span>
<span class="creation-date"></span>
<div class="title"></div>
</div>
Since you want to change the style of the parent element based on a pseudo-class of the child element, this isn't really possible with CSS alone today.
You can do it with the :has() pseudo-class but that is currently only supported in Safari (with support for Chrome a few months away and no sign of it in Firefox, Edge, Opera or elsewhere).
#parent {
background: white;
border: solid black 1px;
padding: 2em;
max-width: 50%;
margin: auto;
}
#parent:hover:not(:has(#child:hover)) {
background: orange;
}
#child {
background: #aaa;
border: solid black 1px;
padding: 2em;
}
#child:hover {
background: green;
}
<div id="parent">
<div id="child"></div>
</div>
For a more reliable approach, you should probably look at adding a splash of JavaScript to the mix.
Use mouseenter and mouseleave events to modify the classes of the parent element, then reference the class in your stylesheet.
const parent = document.querySelector('#parent');
const child = document.querySelector('#child');
const enter = event => parent.classList.add('child-hover');
const leave = event => parent.classList.remove('child-hover');
child.addEventListener('mouseenter', enter);
child.addEventListener('mouseleave', leave);
#parent {
background: white;
border: solid black 1px;
padding: 2em;
max-width: 50%;
margin: auto;
}
#parent:hover:not(.child-hover) {
background: orange;
}
#child {
background: #aaa;
border: solid black 1px;
padding: 2em;
}
#child:hover {
background: green;
}
<div id="parent">
<div id="child"></div>
</div>
You can use this CSS Selector,
.post-item>:not(.rating-wrapper):hover {
background-color: white;
}
This will select all immediate children of .post-item which are not .rating-wrapper.
To change the block of the remaining items background color, you can enclose them in another div.
There is a css property called not property.The syntax is like:
:not(element) {
// CSS Property}
If you want to learn more, please visit this link:
https://www.geeksforgeeks.org/how-to-exclude-particular-class-name-from-css-selector/
The pointer-events CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.
try:
pointer-events: none
you can read more here: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
For example, let's say my code looks like below.
Same from css all divs vs direct child divs but, need in SASS.
<div class="Root">
<div>ddddddd</div>
<div>
<div>pppppppppp</div>
<div>pppppppppp</div>
</div>
<div>ddddddd</div>
</div>
I want to put borders on the divs that contain ddddddd, and I want to set the text color on all divs to green.
There are two rules:
I can't add class attributes.
I have to write selectors that start with .Root.
Any Ideas?
It could be like this (SASS):
.Root
padding: 1em
color: green
> div:not(:nth-of-type(2))
border: 1px solid red
which compiles to:
.Root {
padding: 1em;
color: green;
}
.Root > div:not(:nth-of-type(2)) {
border: 1px solid red;
}
<div class="Root">
<div>ddddddd</div>
<div>
<div>pppppppppp</div>
<div>pppppppppp</div>
</div>
<div>ddddddd</div>
</div>
Also the last <div> should be </div>.
<div>
<span class="brd-box">
<h3>Garages For</h3><p>Renault KWID</p>
</span
</div>
<style>
.brd-box {
border: 1px solid #ccc;
}
</style>
I want to put h3 and p in a box border with 1px so with span tag and I am unable to achieve it.
Span is display:inline by default. So change it to display:block
<div>
<span class="brd-box">
<h3>Garages For</h3><p>Renault KWID</p>
</span>
</div>
<style>
.brd-box {
display:block;
border: 1px solid #ccc;
}
</style>
Instead of giving the class brd-box to the span you instead should give it to the div
<div class="brd-box">
<h3>Garages For</h3>
<p>Renault KWID</p>
</div>
<style>
.brd-box{
border: 1px solid #ccc;
}
</style>
The images at the bottom arent't counted in the overflow:hidden attribute in the all class. They overflow and the positioning is very difficult as the border of the all div does not follow the images down.
<div class="all">
<div id="banner"><img src="images/banner1.jpg" alt="PCXD Banner"/></div>
<div class="nav">
...
</div>
<h1 class="under"><br/><br/>Image><br/></h1>
<table>
...
</table>
<img id="reviewI1" src="images/RL1.jpg" alt="Rocket League 1"/>
<img id="reviewI2" src="images/RL2.jpg" alt="Rocket League 2"/>
<img id="steam2" src="images/steam.png" alt="Steam"/>
</div>
CSS:
.all{
width:1200px;
margin:auto;
border:5px solid #404040;
overflow:hidden;
}
#reviewI1 {
width:500px;
position:absolute;
top:415px;
left:1010px;
border: 3px solid #fedd58;
}
#reviewI2 {
width:500px;
position:absolute;
top:710px;
left:1010px;
border: 3px solid #fedd58;
}
#steam2 {
width:100px;
left:1210px;
position:absolute;
top:1010px;
}
You need to add a height to the .all class e.g. height: 400px;
Yours images are in absolute position, that mean they are out of the DOM flow.
So the overflow property won't apply in that case. You need to remove absolute position to use it :
#reviewI1 {
width:500px;
top:415px;
border: 3px solid #fedd58;
}
See this fiddle
Remove the "position:absolute" from the images' styling.
I'm doing some formatting on a webpage and I'm wondering if it's possible to save a chunk of html code as a class and reuse it.
For example:
I want to change this -
<div>
<hr>
<p>Item 1</p>
<a href="oh.jpg" />
<hr>
</div>
<div>
<hr>
<p>Apple</p>
<hr>
</div>
To this -
<div class="section">
<p>Item 1</p>
<a href="oh.jpg" />
</div>
<div class="section">
<p>Apple</p>
</div>
With the same end result of being contained within two horizontal rules.
Is there a way of making a class that isn't just for styling but contains HTML code as well?
The closest thing to what you're describing is the CSS pseudo-elements :before and :after. You can't insert HTML, but you can insert text or images, or a simple rectangle with content:"";display:block;. With some creativity you can pull off a lot of effects with just CSS.
So while you can't insert an actual <hr> with CSS, you can psuedo-elements to draw one with whatever styles you please:
.section:before {
content: "";
display: block;
height: 2px;
border: 1px inset #000;
border-width:1px 1px 0 0;
}
.section:after {
content: "";
display: block;
height: 2px;
border: 1px inset #000;
border-width:1px 1px 0 0;
}
If you absolutely need to add HTML, you can use Javascript to find all elements with class .section and append child elements.
you can use CSS
.section{
width : 100%;
border-bottom: 2px solid #ccc;
margin-top : 5px;
}