Basically I want to style a p tag when it is not present inside another div.
For example
<div class="container">
<div class="row">
<p>I want to style here</p>
<div class="secondClass">
<p>I don't want to style here</p>
</div>
</div>
</div>
I tried the following but no luck
.container > :not(.secondClass) + p {
color: red;
}
Tou can change the style like this :
div > :not(.secondClass) > p {
color: red;
}
There are several ways you can do this, depending on context. See code below:
.container .row > p {
background: red;
}
<div class="container">
<div class="row">
<p>I want to style here</p>
<div class="secondClass">
<p>I don't want to style here</p>
</div>
<p>I want to style here</p>
</div>
</div>
,
Related
Is it possible to select a specific <div> when another <div> which is not a parent is :hover?
All that in HTML5/CSS3 only, without JS.
<section>
<div id=first></div>
</section>
<section>
<div class=second></div>
</section>
As an example, i want <div class=second> to show when <div id=first> is :hover.
This is possible, but only if the two elements have the same parent.
Using the element1 ~ element2 selector. For example:
HTML:
<div class="first">
<!-- content -->
</div>
<span class="example-element"></span>
<div class="second">
<!-- content -->
</div>
CSS:
.first:hover ~ .second {
/* styles */
}
If you need to select an element that does not have the same parent, you need to use javascript.
this is two ways to achive that, with click adding an a tag or with hover that its a little tricky
.second{
display:none;
}
#second:target {
display:block;
}
#first a{
text-decoration:none;
color:black;
}
.disp1:hover + .disp2{
display:block;
}
.disp2{
display:none;
}
<section>
<div id="first"><a href="#second" >div one</a></div>
</section>
<section>
<div id="second" class="second">div two</div>
</section>
<div class="disp1">first div</div>
<div class="disp1 disp2">second div</div>
I'm trying to target the class, .textbox-fill to change the background colour and text colour for each individual box element. For example .textbox-fill's first-child should be grey. The second-child should be white. The third child I want to adjust the height slight and so on.
I have tried using the nth-child selector #About-Container .about-inner-content article:nth-child(1n+2) .textbox-fill nothing seems to work. Example here
<article class="col-sm-6 grid-tile">
<div class="textbox-fill">
<div class="about-textbox">
<h2>Some text</h2>
<p>Some text</p>
</div>
</div>
</article>
I have encounter this issue in the past and I'm not 100% sure how I resolved it. I have read several articles and posts on this subject. I understand the basics, however something more complex like this I always approached with trial and error method.
Does anyone know how I can solve this issue?
Since your .textbox-fill is inside the article, it is the article you need to start with, as target the text-fill using nth-child will not work as it can't see outside its parent
So do like this instead
article:nth-child(1) .textbox-fill {
color: red;
}
article:nth-child(2) .textbox-fill {
color: lime;
}
article:nth-child(3) .textbox-fill {
color: blue;
}
<article class="col-sm-6 grid-tile">
<div class="textbox-fill">
<div class="about-textbox">
<h2>Some text</h2>
<p>Some text</p>
</div>
</div>
</article>
<article class="col-sm-6 grid-tile">
<div class="textbox-fill">
<div class="about-textbox">
<h2>Some text</h2>
<p>Some text</p>
</div>
</div>
</article>
<article class="col-sm-6 grid-tile">
<div class="textbox-fill">
<div class="about-textbox">
<h2>Some text</h2>
<p>Some text</p>
</div>
</div>
</article>
If we talk about the .textbox-fill's .about-textbox's children, the h2 and p, do like this, where you use the global selector * in *:nth-child, as the children is of different types
.textbox-fill .about-textbox *:nth-child(1) {
color: red;
}
.textbox-fill .about-textbox *:nth-child(2) {
color: lime;
}
<article class="col-sm-6 grid-tile">
<div class="textbox-fill">
<div class="about-textbox">
<h2>Some text</h2>
<p>Some text</p>
</div>
</div>
</article>
If you have a .textbox-fill with several children, like:
div.textbox-fill
h1#header
div#firstDiv
div#secondDiv
article#someArticle
div#thirdDiv
Now, .textbox-fill div:first-child will target nothing, because there isn't any div that is a first child of it's parent (.textbox-fill). Although .textbox-fill div:first-of-type will target div#firstDiv. .textbox-fill div:nth-child(2) will also target div#firstDiv. div#thirdDiv will be .textbox-fill div:nth-of-type(3) or .textbox-fill div:nth-child(5) or .textbox-fill div:last-child or .textbox-fill div:last-of-type.
If you want to target specific .textbox-fill located on site, but with different parents, like:
div.something
div.textbox-fill
[...]
article#other
div.textbox-fill
You cannot target it using nth-child nor nth-of-type. You will need to find another way based on your site tree.
I have the following HTML which works:
<div class="preview">
<div class="image">
<img src="SomeFile/SomeImage.gif">
</div>
<h2>Some heading</h2>
<p>Some text</p>
</div>
And the following CSS (which works):
.preview:hover > h2 {display: none;}
.preview:hover > p {display: block;}
If I add a new <div id="newID"> around the HTML, how do I update the CSS to work with the new ID wrapper?
Also, how do I use multiple IDs in the CSS to avoid re-writing this for each ID?
Thanks
If you need the style to be applied only to the elements that are children to the new wrapper, then you can just add the ID selector like this:
#newID .preview:hover > h2 {display: none;}
Otherwise you don't need to change anything.
Is that what you looking for?
<div id="newID">
<div class="preview">
<div class="image">
<img src="SomeFile/SomeImage.gif">
</div>
<h2>Some heading</h2>
<p>Some text</p>
</div>
<div class="preview">
<div class="image">
<img src="SomeFile/SomeImage.gif">
</div>
<h2>Some heading</h2>
<p>Some text</p>
</div>
</div>
your css:
#newID .preview:hover > h2 {display: none;}
#newID .preview:hover > p {display: block;}
Use class for styling multiple elements with the same style:
.yourClass:hover {}
I didn't fully understand what you're looking for, but if you are trying to apply the css to newly added divs then you can try this
<html><head>
<style>
.preview { border: 1px solid black;width:200px}
.preview:hover > h2 {display: none;}
.preview:hover > p {display: block;}
</style>
<script src=path/to/jquery.js></script>
</head><body>
<button class=plus>Add</button>
<div class="preview">
<div class="image">
<img src="SomeFile/SomeImage.gif">
</div>
<h2>Some heading</h2>
<p>Some text</p>
</div>
<script>
// Button Adds a new div with the class 'preview'
$('button.plus').click(function () {
var new_id = '<div id="newID" class=preview>New Div <br/> <h2>Some heading</h2> <p>Some text</p></div>';
$('body').append(new_id);
});
</script>
</body></html>
If your ID use same structure, for example #newid-x, #newid-y, #newid-z, you can write you css rule targeting all ID start with newid-
div[id^='newid-']:hover > h2, div[id*=' newid-']:hover >h2 {
display: none;
}
I'd like to have all surnames on the second line AND maintain the exact same width for test div. What is the best way of achieving this with CSS?
HTML:
<div class="test">
<h1>Mike S</h1>
</div>
<div class="test">
<h1>Mike Smith</h1>
</div>
<div class="test">
<h1>Mike Smiths</h1>
</div>
CSS:
.test {width:25%;float:left;background:red;margin-right:20px}
h1 {text-align:center}
http://jsfiddle.net/zcg9k5xh/
Update your code with this:
.test {width:25%;float:left;background:red;margin-right:20px}
h1 {text-align:center}
h1 span{display: block;}
<div class="test">
<h1>Mike <span>S</span></h1>
</div>
<div class="test">
<h1>Mike <span>Smith</span></h1>
</div>
<div class="test">
<h1>Mike <span>Smiths</span></h1>
</div>
You can also do this by using css, update above css
h1 span{display: list-item;list-style:none;}
jsfiddle with this
http://jsfiddle.net/zcg9k5xh/2/
Given that it seems you are willing to change your HTML, I would recommend you simply add <br> after the first name, instead of wrapping the last name in any other tags. This would be deemed best practice.
The HTML <br> Element (or HTML Line Break Element) produces a line
break in text
This will give more semantic HTML- without the need to adjust native element styling, or clutter your DOM with uneccessary nodes.
.test {
width: 25%;
float: left;
background: red;
margin-right: 20px
}
h1 {
text-align: center
}
<div class="test">
<h1>Mike<br>S</h1>
</div>
<div class="test">
<h1>Mike<br>Smith</h1>
</div>
<div class="test">
<h1>Mike<br>Smiths</h1>
</div>
Use the word-spacing attribute to the child tag:
.test {
width: 25%;
float: left;
background: red;
margin-right: 20px
}
h1 {
background-color: blue;
word-spacing: 100px;
}
<div class="test">
<h1>Mike S</h1>
</div>
<div class="test">
<h1>Mike Smith</h1>
</div>
<div class="test">
<h1>Mike Smiths</h1>
</div>
I don't see what you are asking, it seems like the jsfiddle is what you are asking here.
But you can always set width to 100% so it cover for the text, if you want all that text in the same div then put it all under one Div tag.
Is this what you want?
.test {width:25%;float:left;background:red;margin-right:20px}
h1 {text-align:center}
<div class="test">
<h1>Mike</h1>
<h1>S</h1>
</div>
<div class="test">
<h1>Mike</h1>
<h1>Smith</h1>
</div>
<div class="test">
<h1>Mike</h1>
<h1>Smiths</h1>
</div>
I have the following html
<div class="post">
<h2 class="title">TITLE: Kausalya</h2>
<p class="content">CONTENT: Shaunaka Shakha</p>
</div>
<div class="post">
<h2 class="title">TITLE: Kausalya</h2>
<span class="author">AUTHOR: Ayuidasht</span>
<p class="content">CONTENT: Shaunaka Shakha</p>
</div>
I can do this with jQuery, but how can I do this with css?
$('.title').next('.content').css('margin-top','20px');
I just need a margin-top on the content if it comes after a title. i know I can do this with css but i forgot how and I cant figure out what it is called.
You are looking for the adjacent sibling combinator, +.
Example Here
.title + .content {
margin-top:20px;
}
h2 + p{
margin-top: 20px;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors