html...
<div id="main">
<div class="news"></div>
</div>
How could I assign css for #main id which has .news class with pure css ?
Is there something like #main:only(.news){...}?
You could keep using the #main id and then apply a class to the same element with it's own styles that could override the default #main styles, something like
<div id="main" class="news">
</div>
Then you could write a css rule like this
#main.news {
/* your css rules go here */
}
I often use a body class to allow me to distinguish a common id from one page to another
<body class="news-page">
<div id="main">
<div class="news">
then your css can do thus
.news-page #main {
background: blue;
{
.another-page #main {
background: green;
}
.news {
background: red;
}
How about something like this? You can target id="main" with #main and class="news" with .news.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style type="text/css"
#main { color: red; }
.news { color: blue; }
</style>
</head>
<body>
<div id="main">
This is #main
<div class="news">
This is .news
</div>
</div>
</body>
</html>
try a parent child relationship something like
#main > div {
color:pink;
}
Related
My thing is not working i can't figure out any errors too.As far as i know i tried to separate those mountains and cloud on different level which seems not to be working rather they're sitting beside on their parent element
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="icon" href="images/icon2.ico">
<title>Farhan Sadiq</title>
</head>
<body class="body">
<div class="top-container">
<img class: "top-cloud" src="images/cloud.png" alt="cloud-img">
<h1>Farhan Sadiq</h1>
<p><span class="underline">WebDevloper</span> and <span class="underline">GameDevloper</span></p>
<img class: "bottom-cloud" src="images/cloud.png" alt="cloud-img">
<img src="images/mountain.png" alt="mountain-img">
</div>
<div class="middle-container">
</div>
<div class="bottom-container">
</div>
</body>
</html>
.body {
margin: 0;
text-align: center;
}
h1 {
margin-top: 0;
}
.top-container {
background-color: #CEE5D0;
}
.middle-container {
background-color: pink;
width: 200px;
height: 200px;
}
.bottom-container {
background-color: yellow;
width: 200px;
height: 200px;
}
.underline {
text-decoration: underline;
}
.bottom-cloud {
position: absolute;
}
you have a typo in the section, the property class uses = instead of : , then what does the output you expect mean, how do you separate it?
There is a typo class in the tag. You have to change the class in this img tag class: "top-cloud" so it looks like this class="top-cloud".
I want to apply custom css class to the HTML tags in confluence. I tried adding css class in HTML macro as well as in css Macro. but the style is reflecting only in the preview, when i save and view the page style is not available, any advice
HTML Macro:
<head>
<style>
.myClass {
padding: 18px;
background-color: Grey;
}
</style>
</head>
<body>
<div class="myClass">
<p>Answer will be posted here.</p>
</div>
</body>
Css Macro
.myClass{
padding: 18px;
background-color: Grey;
}
Preview
When i save and publish
<head>
<style>
.myClass {
padding: 18px;
background-color: Grey;
}
</style>
</head>
<body>
<div class="myClass">
<p>Answer will be posted here.</p>
</div>
</body>
I had the same problem. Simply get rid of the head section and try the below code:
<body>
<style>
.myClass {
padding: 18px;
background-color: Grey;
}
</style>
<div class="myClass">
<p>Answer will be posted here.</p>
</div>
</body>
How to create a document that allow switch themes using HTML and CSS ? (without JavaScript)
I created simple HTML document :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style type="text/css">
:root { --bg-color: lightgreen; }
* { background-color: var(--bg-color); }
/* You can add lines here. */
</style>
</head>
<body>
<div>
<h2 id="theme-1">Theme 1</h2>
Theme 1
</div>
<div>
<h2 id="theme-2">Theme 2</h2>
Theme 2
</div>
<div>
<h2 id="no-theme">No theme</h2>
No theme
</div>
</body>
</html>
with <style> tag.
I tried to insert this CSS code :
:has(#theme-1:target) { --bg-color: red; }
:has(#theme-2:target) { --bg-color: blue; }
but no one browser support :has selector.
Then I tried to insert this :
#theme-1:target { --bg-color: red; }
#theme-2:target { --bg-color: blue; }
but it doesn't change background-color of <body>. It change <h2> tags only.
So, how to switch between themes ? Is it possible at all ?
It is possible: You have to nest everything (or at least everything that should depend on theme). e.g:
<html lang="en">
<head>
<title>Document</title>
<style type="text/css">
#theme-1:target{
background: red;
}
#theme-1:target h2{
font-family: "Verdana";
}
#theme-2:target{
background: blue;
}
#theme-2:target h2{
font-family: "Times New Roman";
}
</style>
</head>
<body>
<div id="theme-1"><div id="theme-2">
<h2>Theme 1</h2>
Theme 1
<h2>Theme 2</h2>
Theme 2
<h2 id="no-theme">No theme</h2>
No theme
</div></div>
</body>
</html>
I'm trying to align the tab divs horizontally, but It doesn't work and I can't find my fault?
index.html
<!DOCTYPE html>
<html>
<head>
<title>Employees</title>
<link rel="stylesheet" href="/calc/stylesheets/style.css">
</head>
<body>
<div class="tabs">
<div class="tab">Home</div>
<div class="tab">Add Expenses</div>
<div class="tab">Tags</div>
<div class="tab">Overview </div>
</div>
</body>
</html>
style.css:
#tabs {
overflow: hidden;
}
#tab {
float: left;
}
You've mixed up classes and ID's. Modify your css to this:
.tabs {
overflow: hidden;
}
.tab {
float: left;
}
#tab should be .tab, according to your HTML
You have to float your class .tab instead of an id. Also, when you float elements you need to clear at one point. Like this:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Employees</title>
<link rel="stylesheet" href="/calc/stylesheets/style.css">
</head>
<body>
<div class="tabs">
<div class="tab">Home</div>
<div class="tab">Add Expenses</div>
<div class="tab">Tags</div>
<div class="tab">Overview </div>
<div class="clear"></div>
</div>
</body>
</html>
CSS
#tabs {
overflow: hidden;
}
.tab {
float: left;
}
.clear {
clear: both;
}
Fiddle: http://jsfiddle.net/hM62P/
You are using #tabs and #tab, which is not at all available in your HTML. # refers to ID. You need to use .tabs and .tab which refers to a class.
.tabs{
width:100%;
border:1px solid red;
}
.tab{
float:left;
}
Demo Link
Use this CSS,
.tabs {
width:100%;
}
.tab {
width:25%;
float:left;
}
The problem is that you are using #tab instead of .tab. Here id is not used. # is for id
I'm currently working on a menu for a website and got a problem: I have a logo which should be on the left side and menu buttons which should be on the right side. This is what I got so far:
<!DOCTYPE HTML>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Share:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<title>Menu</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: 'Share', cursive;
}
#header {
background-color: ;
}
#header_logo {
width: ;
margin-top: ;
}
#header_menu {
width: 100%;
}
.menubutton {
height: 2.5em;
line-height: 2.5em;
display: inline-block;
background-color: ;
margin-left: 20px;
}
a {
font-family: 'Share', cursive;
}
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
</style>
</head>
<body>
<div id="wrapper" align=""> <!-- Beginning of wrapper -->
<div id="header"> <!-- Beginning of Header -->
<div id="header_logo" align="left">
<img src="http://futurized.t15.org/fut_logo.png" style="height: 12px; z-index: 2;"/>
</div>
<div id="header_menu" align="right">
<div class="menubutton">
Home
</div>
<div class="menubutton">
Info
</div>
<div class="menubutton">
Werben
</div>
<div class="menubutton" align="right" style="margin-right: 20px;">
Kontakt & Impressum
</div>
</div>
</div> <!-- End of header -->
</div> <!-- End of wrapper -->
</body>
</html>
The problem is that the logo is not on a line with the menu buttons…
Before I added the logo everything worked perfect. I tried different things but nothing worked. Do you guys have an idea how I can solve that problem?
Add float:left to your #header_logo div.
jsFiddle example
Note that you may also want to reduce or eliminate the line-height property on your .menubutton class if you want the spacing to be even tighter.
You may also try for display: inline-block;
This property allows a DOM element to have all the attributes of a block element, but keeping it inline.
Also do check this article