So I'm working with a tool that allows me to provide CSS style sheets, but I'm facing some issues.
In my original HTML code I have many DIV's inside DIV's, which makes it a little hard to fix the code. In my original code the DIV's stand for Groups, and at the first group I want to assign different styles as I do to the others.
In my example below, I'd like to add styles to the first <div class="Test2">, but not to the second and third. I've tried using :not(:first-child), or things like that as you can see, but none of them worked.
Please help me out!
.Test1 {
background: #ff0000;
color: green;
}
.Test2 {
color: blue;
}
.Test2 div:nth-child(1n+2) {
color: yellow;
}
<body>
<div class="Test1">
<div class="Test2">
<span>The first paragraph.</span>
</div>
<div class="Test3">
<div>dummy</div>
<p>Test</p>
</div>
<div class="Test2">
<span>The first paragraph.</span>
</div>
<div class="Test3">
<div>dummy</div>
<p>Test</p>
</div>
<div class="Test2">
<span>The first paragraph.</span>
</div>
<div class="Test3">
<div>dummy</div>
<p>Test</p>
</div>
</div>
</body>
There are multiple ways to do this, you can use :first-of-type to make sure the first element with class Test-2 and type div will be affected.
.Test1 {
background: #ff0000;
color: green;
}
.Test2:first-of-type {
color: blue;
}
.Test2 {
color: yellow;
}
<body>
<div class="Test1">
<div class="Test2">
<span>The first paragraph.</span>
</div>
<div class="Test3">
<div>dummy</div>
<p>Test</p>
</div>
<div class="Test2">
<span>The first paragraph.</span>
</div>
<div class="Test3">
<div>dummy</div>
<p>Test</p>
</div>
<div class="Test2">
<span>The first paragraph.</span>
</div>
<div class="Test3">
<div>dummy</div>
<p>Test</p>
</div>
</div>
</body>
.Test2 div:nth-child(1n+2) {
color: yellow;
}
Will make Test2's 1n+2'th child appear yellow. Test2 has only one child: <span>The first paragraph.</span>. You'll have to put the selector on the div above. (Test2 is the first child of Test1)
All of them have the same class just change the class on other two or keep Test2 as it is for common properties that you want to apply and if you want the first one to have different style you can give it a new class with any name and use that class to aplly proprites different from the rest of divs
If i get it right, You want to achieve blue color just on The first paragraph.
.Test2:first-child{
Color:blue;
}
Should do that.
Related
I want to add/remove a class to an element (child of the same div is being clicked) for example, if the user press the #first element: The first element should now have 2 classes: .block .active. and the should now look red, But every other should remain intact. I've try the following (code below) nonetheless after I click on one block all of the blocks change their state and now all of them have both classes: .block .active.
Since I have a lot of blocks, If possible I don't want to use id selectors, just detect and apply the desired classes on the same parent div.
css
.block p{
color: blue;
}
.block.active p{
color: red;
}
html
<div class="block" id="first">
<p> Element in blue </p>
</div>
<div class="block" id="second">
<p> Element in blue </p>
</div>
<div class="block" id="third">
<p> Element in blue </p>
</div>
jQuery
$(".block").click(function(){
$("block").closest( "block" ).toggleClass( "active" );
});
You were almost there. Instead of using .block & closest you can target the element being clicked with this.
In the below code, we are first removing the active class from all elements with class block and then applying the active class to the clicked element.
$(".block").click(function(){
$('.block').removeClass('active');
$(this).addClass( "active" );
});
.block p{
color: blue;
}
.block.active p{
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block" id="first">
<p> Element in blue </p>
</div>
<div class="block" id="second">
<p> Element in blue </p>
</div>
<div class="block" id="third">
<p> Element in blue </p>
</div>
$(".block").click(function(){
if ( $(this).hasClass('active')) {
$(this).removeClass('active')
} else {
$('.block').removeClass('active');
$(this).addClass('active');
}
});
.block p{
color: blue;
}
.block.active p{
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block" id="first">
<p> Element in blue </p>
</div>
<div class="block" id="second">
<p> Element in blue </p>
</div>
<div class="block" id="third">
<p> Element in blue </p>
</div>
$(".block").click(function(){
$(this).toggleClass("active");
});
Please see the following html code:
<div class="container">
<div class="sidebar-column">
<h2 class="title">Column 01</h2>
<p>content01</p>
<p>content02</p>
<p>content03</p>
</div>
<div class="sidebar-column">
<h2 class="title">Column 02</h2>
<p>content04</p>
<p>content05</p>
<p>content06</p>
</div>
</div>
I'd like to select only the second title with content "Column 02" is there anyway to do that using only CSS?
I've tried many way including select the headline "h2" of the second child class "sidebar-column" but doesn't work:
<style>
div.sidebar-column:nth-child(2) > h2.title {
background-color: red;
}
</style>
After adding style "background-color: red", the second "h2" is supposed to change background color to red, but nothing happen.
and idea? Thanks!
Edit: I've found out how to fix the issue. Just remove the ">". The css now become:
<style>
div.sidebar-column:nth-child(2) h2.title {
background-color: red;
}
</style>
Now it's worked in Wordpress addition CSS. But I still don't know why.
There are 2 ways of doing it.
SOLUTION 1- make one more css class (eg-class2) and add both the classes to the second h2 element.
<div class="container">
<div class="sidebar-column">
<h2 class="title">Column 01</h2>
<p>content01</p>
<p>content02</p>
<p>content03</p>
</div>
<div class="sidebar-column">
<h2 class="title class2">Column 02</h2>
<p>content04</p>
<p>content05</p>
<p>content06</p>
</div>
</div>
The second class will contain the code-
<style>
.class2{
background-color: red;
}
</style>
SOLUTION 2- Or if you just want to add red background color to Column 02,you can write the inline CSS code
<div class="container">
<div class="sidebar-column">
<h2 class="title">Column 01</h2>
<p>content01</p>
<p>content02</p>
<p>content03</p>
</div>
<div class="sidebar-column">
<h2 class="title" style="background-color:red;">Column 02</h2>
<p>content04</p>
<p>content05</p>
<p>content06</p>
</div>
</div>
Best way is just add an data-attribute to your template and select with that data-attribute in css.
working http://jsfiddle.net/Ls8EP/65/ link
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 have a column layout design where I will have some fields on the left, and--when hovering one such field--info about them on the right. However, I can't seem to get it working. Please let me know what you think.
EDIT I am totally flexible to changing the HTML, CSS, or both. Also, I would prefer not to use javascript, if possible.
HTML:
<div id="content">
<div class="content-left">
<p class="one">This is page1 left content</p>
</div>
<div class="content-right">
<p class="one_info">This is page1 right content</p>
</div>
</div>
CSS:
.content-left{
background-color: #bcc5d8;
display: inline-block;
float: left;
width: 75%;
margin-left:15px;
margin-right:5px;
}
.content-right{
background-color: lightsteelblue;
display: inline-block;
margin-right:15px;
//margin-bottom:16px;
}
.one_info{
opacity:0;
}
.one:hover .one_info{
opacity:1;
}
Code in motion:
https://jsfiddle.net/828qthhq/3/
Your CSS is written in a way such that .one_info will only get an opacity of 1 if it is a child of .one.
In other words, you would get the desired effect using the following HTML.
<div class="one">
Always visible
<div class="one_info">Show on hover</div>
</div>
In order to use your current HTML and still get the desired effect, you would need to use javascript.
As others have stated, the way you're doing it is a tad off! Here is a solution using javascript! I added onmouseover and onmouseout events to the first div which call a JS function to toggle the opacity.
<script>
function toggleInfo(on){
var styleToSet;
if(on){
styleToSet = "opacity:1";
} else{
styleToSet = "opacity:0";
}
document.getElementById("test").style=styleToSet;
}
</script>
<div id="content">
<div class="content-left" onmouseover="toggleInfo(1)" onmouseout="toggleInfo(0)">
<p class="one">This is page1 left content</p>
</div>
<div class="content-right">
<p id="test" class="one_info">This is page1 right content</p>
</div>
</div>
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>