What is the correct way to select a link of a certain class within a body of specific class. For example my body has the class "abc" and my link has the class "efg", what would my css code look like? (I'm trying to create active links for a Magento block)
body.body_class a.link_class
This question is a bit basic - you should try to learn this stuff a bit.
You have to do some research
body.abc a.efg {
rules
}
even w3c can help you with that
You should write something like this:
.abc .efg {
/*Your CSS Rules*/
}
SEE DEMO
Check this example
<html>
<head>
<style>
.outer
{
background-color: red;
height: 40px;
margin: 10px;
}
.inner
{
background-color: blue;
height: 20px;
margin: 5px;
}
.outer .inner
{
background-color: green;
}
</style>
</head>
<body onload="loadCars()">
Check div style.
<div id="mydiv" class="inner">
</div>
</div>
<div id="mydiv" class="outer">
<div id="mydiv" class="inner"></div>
</div>
</body>
</html>
Save the above code in an html file and open it.
Related
Good afternoon,
I'm struggling to get my hover over box to change the color of the <a> tag and change the <img> tag.
However, The <p> tag does change when I hover over it.
I have inserted all of them under one parent div tag.
Is there a way to make this work?
Cheers,
Anrich Vigus
Try this
.divClassOrId:hover{
background-color: red;
}
If I don't understand it, you want to define a feature for a label. For this you need to do operations from css. I'll throw you a sample code like this.
<html>
<head>
<style>
div:hover {
background-color: yellow;
}
div{
background-color: green;
width : 500px;
height: 500px;
}
</style>
</head>
<body>
<div>
<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>
</div>
</body>
</html>
If you try to hover a div and highlight just another one:
HTML:
<div class="class">
<div class="childClass">Test</div>
</div>
CSS:
.class:hover + .childClass {
background-color: blue;
}
.childClass {
background-color: red;
}
This will Modify the Child if the parent is hovered
Alternatively you can use:
.class:hover ~ childClass {
backgroud-color: blue;
}
i have made 5 hyperlinks in html file but i want to give space between them
how should i do it a little help!
thank you!
<body>
<div class="back">
<div class="image">
<img src="comp.jpg" alt="background image" style="width:100%; height:100%">
</div>
<h3 class="name" style="color: #d9d9d9">
ASHUTOSH KUMAR SINGH
</h3>
<div class="link" align="middle">
About
Contact
Skills
My Work
Blog
</div>
<div class="myimg" align="middle">
<div class="circle" align="middle">
</div>
<img src="ashu.jpg" class="myimage" style="height: 300px; width:300px";>
</div>
</div>
this is my css file: in the code below i have made a class of link in which i
cascaded it. i want to give some equal space between them so that it look neat.
html,body{
margin:0;
}
div.link{
font-size: 25px;
position: fixed;
/*text-space: 100;*/
margin-top:500px;
margin-left: 250px;
}
.back{
height: 100%;
width: 100%;
margin: 0;
}
.image{
position: fixed;
}
.myimg{
position: absolute;
margin-top:100px;
margin-left: 500px;
}
.myimage{
border: 2px solid rgba(114, 114, 114, 0.55);
border-radius: 100%;
}
.circle{
border: 2px ;
border-radius: 100%;
background-color: black;
}
.name{
position: fixed;
margin-top:420px;
margin-left: 530px;
}
I think the most easiest way you're looking for is:
.link a {margin-right:10px;}
the only problem with this is that all link elements get now a margin-right, from the first to the last one.
if you want to exclude the last element to have no margin right, add an additonal:
.link a:last-child{margin-right:0px;}
remember that in css you can perfectly nest css selectors
html body .back .link a{some-css-rule}
by the way, the more specific a selector is, the more important it will be when the browser analyses them)
<div class="some_class" id="some_id" style="color:grey;">sometext</div>
#some_id{color:black;}
.some_class{color:blue;}
div {color:green;}
the color will be grey, because inline selectors have more weight than selectors with ID, which have more weight than selectors with classes, which have more weight than selectors with html containers.
This is called CSS specifity
CSS-specifity calculator by keegan.st
CSS specifity explained by css-tricks
Try to avoid custom CSS-Styles in your HTML-File and include them in your CSS-File. You can use padding or margin in your CSS-File, see this link for the difference.
YourHTMLfile.html
<head>
<link rel="stylesheet" href="YourStyleFile.css">
</head>
<body>
...
<div class="link" align="middle">
About
Contact
Skills
My Work
Blog
</div>
</body>
YourStyleFile.css
.link a {
padding: 16px;
color: white;
}
EDIT: make sure to create a CSS-File and add it to your <head> section of your HTML-File. They both have to be in the same directory. Another reason why my code may not work for you is that maybe you have another CSS-File which overrides the .link class.
Wrap them in a div and style the div with word-spacing: 10px; :)
I have a web app using AngularJS and Bootstrap. In a page I want to have two components with different styles. For example:
<div ng-include="'./component/header.html'"></div>
<div ng-include="'./component/header.html'"></div>
I want these 2 divs have different styles. My question is, 1) How can I encapsulate the style code into header.html? 2) How can I use less to define the style?
Thank you in advance!
For the first question:
Why not give the 2 divs a different class and then adopt the CSS like that:
<div class="first" ng-include="'./component/header.html'"></div>
<div class="second" ng-include="'./component/header.html'"></div>
CSS:
.first table {
/* style definitions */
}
.second table{
/* style definitions */
}
Like in this Snippet
You can add an id or class to each ng-include and style under that selector with css or less. It makes no difference what preprocessor or lack of, you use.
angular.module('app', []);
function HomeCtrl() {
}
* {
box-sizing: border-box;
}
.header {
padding: 20px;
border: 1px solid #000;
}
#header1 {
background: red;
}
#header2 {
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-include="'header.html'" id="header1" class="header"></div>
<div ng-include="'header.html'" id="header2" class="header"></div>
<script type="text/ng-template" id="header.html">
header
</script>
</div>
I have this code HTML:
<div id="top"></div>
<div id="mid" style="display:none;">
<div class="close">INCHIDE X</div>
<p id="first_paragraph">
TEXT
</p>
</div>
This is code CSS:
#top {
margin: auto;
width: 400px;
height: 38px;
background: url(images/DESPRE-NOI.png) no-repeat;
}
body.page-id-10#top {
display:none;
}
I want to #top deactivation of the page in wordpress which has ID 10.
I tried but unfortunately does not work ... Can you tell me please what is wrong?
This is the site:
www.avocat.dac-proiect.ro/wp
Thanks in advance!
You can do something like this to give you hooks (for JavaScript or CSS) on #top depending whether or not you are on the page with ID 10.
<?php
if(is_page(10)) {
<div id="top" class="top-inactive"></div>
} else {
<div id="top" class="top-active"></div>
}
?>
You need to use a child or descendant selector:
Child body.page-id-10>#top
Descendant body.page-id-10 #top
I want to hide a div con1 when i hover div con2 and vice versa. I am able to hide con2 when i hover con1 but can't do the same vice-versa. Why it is not working when i hover con2 to hide con1.
Below are the codes:
<html>
<head>
<title>Home</title>
<style type="text/css">
#con1{
float: left;
width: 500px;
height: 300px;
background: #f00;
}
#con2{
float:left;
width: 500px;
height: 300px;
background: #808;
}
#con1:hover ~#con2{
visibility:hidden;
}
#con2:hover ~#con1{
display:none;
}
</style>
</head>
<body>
<div id="con1">
</div>
<div id="con2">
</div>
</body>
</html>
Example: http://jsfiddle.net/mendesjuan/s8bbe/
I believe this is not possible with the general sibling selector as it only applies to elements after it in the html-structure. See more: http://css-tricks.com/child-and-sibling-selectors/
A possible (althought not especially elegant solution):
http://jsfiddle.net/s8bbe/4/
<div id="wrapper">
<div id="con1">
</div>
<div id="con2">
</div>
#con1{
float: left;
width: 500px;
height: 300px;
background: #f00;
}
#con2{
float:left;
width: 500px;
height: 300px;
background: #808;
}
#con1:hover ~#con2{
visibility:hidden;
}
#wrapper:hover #con1:not(:hover){
visibility:hidden;
}
Example: http://jsfiddle.net/s8bbe/5/
#KnutSv's solution is great. Here's an add-on if using more than 2 divs.
<div id="con-wrapper">
<div id="con1">
</div>
<div id="con2">
</div>
<div id="con3">
</div>
</div>
And a one-line css with :hover, :not(:hover).
#con1{
float: left;
width: 500px;
height: 300px;
background: #f00;
}
#con2{
float:left;
width: 500px;
height: 300px;
background: #808;
}
#con3{
float:left;
width: 500px;
height: 300px;
background: #606;
}
#con-wrapper:hover > div:not(:hover) {
visibility: hidden;
}
Using "> div" will target all #con-wrapper direct div children, which are not hovered, and hide them.
Use #con-wrapper:hover > div[id^=con]:not(:hover) if only cons needed to be targeted.
Putting the divs in one container div you can hide all contained divs on hoover, but not the actually 'hovered over' one with:
div:hover div {
visibility: hidden;
}
div:hover div:hover {
visibility: visible;
}
See demo: http://jsfiddle.net/TcPJZ/3/
EDIT: It actually works well for arbitrary number of divs (see demo).
Maybe you are using wrong selectors
try this
.con2:hover ~ div {display:none}
But this is "Hard code" if you will want to add more divs before con-2 they will be dissappearing too
I try it on jsfiddle and I get the problem.
When you have this:
<div id="con1">
</div>
<div id="con2">
</div>
Hover on "con1" works, but when you change the positions:
<div id="con2">
</div>
<div id="con1">
</div>
Now it's "con2" which is working and now not "con1".
So , I don't know how to fix it, but I can tell you about make it by Javascript/Jquery.
I think that can be solve the problem.
CSS doesn't support previous sibling selection. If you still want to have a previous sibling selector then you should look in to javascript.
var con1 = document.getElementById('con1');
var con2 = document.getElementById('con2');
function displayElem(el, property, value){
el.style[property] = value;
}
con1.onmouseover = displayElem.bind(null, con2, 'display', "none");
con1.onmouseout = displayElem.bind(null, con2, 'display', "");
con2.onmouseover = displayElem.bind(null, con1, 'visibility', "hidden");
con2.onmouseout = displayElem.bind(null, con1, 'visibility', "");
Working Fiddle
In the above fiddle, I even moved the next sibling selection to javascript so that to let you keep the code structured. if you don't want to do so, then happily don't events to the first element :)
it will be easily done by using below code using jquery , why you depend only on css
$("#con1").hover(function(){
$("#con2").css("visibility","hidden");
},function(){
$("#con2").css("visibility","visible");
});
here is the working sample http://jsfiddle.net/5jRXm/