#section>.snb .tit{position:relative;}
#section>.snb .tit h1{color:#2765b1;font-size:20px;text-indent:25px;}
I am not sure how to apply the css code above to jsp page. It looks different from the basic css with
body {
background: #00ff00 url("smiley.gif") no-repeat fixed center;
}
kind format.
You can apply like this :
<html>
<head>
<style>
#section>.snb .tit{position:relative;}
#section>.snb .tit h1{color:#2765b1;font-size:20px;text-indent:25px;}
</style>
</head>
<body>
<div id="section">
<div class="snb">
<div class="tit">
<h1>test text</h1>
</div>
</div>
</div>
</body>
</html>
Please refer this it will help you to understand css selectors.
In
#section>.snb .tit h1{color:#2765b1;font-size:20px;text-indent:25px;}
it look for h1 tag in element with 'tit' class inside all element's with class value as 'snb' in element with id 'section'.
Related
I have a structure like this:
<body>
<div id="root">
<div>
<div>Not tis one</div>
<script>something</script>
<div>THIS DIV</div>
</div>
</div>
</body>
Somehow script + div didn't work for me, possibly due to some extensions that I have or a similar reason.
I'm trying to give uBlock Origin a target for a "One more story" or whatever overlay at the bottom of the page over here.
You can use either nth-child or last-child depending on whether your code structure changes.
And if you want to make sure it's not too generic, you can specify the parent elements. With the HTML that you have, the CSS could look something like this:
#root div div:last-child {
color: red;
}
Quick Example:
#root div div:last-child {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="root">
<div>
<div>Not this one</div>
<script>something</script>
<div>THIS DIV</div>
</div>
</div>
</body>
</html>
I need to put my span inside a div,but because the content of div is more, it is overflown out of the border of the parent div.
How to solve it?
My outer div should be flexible because the contents in span is dynamic.
Here is the plunker link = DEMO
.outerDiv {
width: 100%;
border: 2px solid black;
}
.div40 {
width: 40%;
}
.div60 {
width: 60%;
float: right;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div class="outerDiv">
<span class="div40">
hello
</span>
<span class="div60">
hello i am trying to insert this content inside the parent div,but i am not able to do so. My content should be inside the border of this div and i want the height not to be fixed as my content is dynamic.
</span>
</div>
</body>
</html>
You need to add a new element after div60
<div class ="outerDiv">
<span class = "div40">
hello
</span>
<span class = "div60">
hello i am trying to insert this content inside the parent div,but i am not able to do so. My content should be inside the border of this div and i want the height not to be fixed as my content is dynamic.
</span>
<div class="clear"></div>
</div>
and add the following in your CSS
.clear {
clear: both
}
set the outerDiv to display: inline-block
/* Styles go here */
.outerDiv
{
width:100%;
border:2px solid black;
display: inline-block;
}
.div40
{
width:40%;
}
.div60
{
width:60%;
float:right;
}
<h1>Hello Plunker!</h1>
<div class ="outerDiv">
<span class = "div40">
hello
</span>
<span class = "div60">
hello i am trying to insert this content inside the parent div,but i am not able to do so. My content should be inside the border of this div and i want the height not to be fixed as my content is dynamic.
</span>
</div>
By adding display inline block to outer div class you can achieve it.
/* Styles go here */
.outerDiv
{
width:100%;
border:2px solid black;
display:inline-block;
}
.div40
{
width:40%;
}
.div60
{
width:60%;
float:right;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<style>.outerDiv span{}</style></style>
<h1>Hello Plunker!</h1>
<div class ="outerDiv">
<span class = "div40">
hello
</span>
<span class = "div60">
hello i am trying to insert this content inside the parent div,but i am not able to do so. My content should be inside the border of this div and i want the height not to be fixed as my content is dynamic.
</span>
</div>
</body>
</html>
Move to fluid content... bootstrap.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
</head>
<body>
<h1>Hello Plunker!</h1>
<div class="container">
<div class="row">
<div class="col-md-4">
hello
</div>
<div class="col-md-8">
hello i am trying to insert this content inside the parent div,but i am not able to do so. My content should be inside the border of this div and i want the height not to be fixed as my content is dynamic.
</div>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<script src="https://getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
</html>
Can someone plz explain the meaning of nodec?
I saw it is being used as a.nodec in CSS
But totally have no idea what is the purpose of this usage.
TQ
If you saw something like
a.nodec {
...
}
Then "nodec" is a class name of "a" tags like in this HTML:
<a class="nodec" href="?">Link #1</a>
<a class="nodec" href="?">Link #2</a>
recently I've been studying about that problem too. The is a reason for you to do a.nodec instead of just .nodec.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.underline{
text-decoration:underline;
}
</style>
</head>
<body>
<div class="underline">
<h1>this is h1</h1>
<p>this is p</p>
</div>
</body>
</html>
Assume the .underline as the .nodec and based on the code above, the output will show h1 and p underlined. For some reasons, you may only want specific element to be able to use the class (for example, you only want h1 to use the underline class). For that reason, you can specify what kind of element can only use the class you have made. Check out the code below.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1.underline{ <!--just added the h1 in front of .underline-->
text-decoration:underline;
}
</style>
</head>
<body>
<div class="underline">
<h1>this is h1</h1>
<p>this is p</p>
</div>
</body>
</html>
In this case, the div won't be able to use the underline class unless you set the class for h1 element to underline (for example this is h1)
In conclusion, it's just about limiting number of element to use specific class. Hope you find this helpful!
I understand that I can scope a style tag to its parent like this:
<div>
<style scoped>
p { color: red }
</style>
<p>Affected</p>
</div>
<p>Unaffected</p>
and that I can include a CSS file in this manner:
<div>
<style scoped>#import(/css/mystyle.css)</style>
<p>Affected</p>
</div>
<p>Unaffected</p>
however, I use Less and would like to use the same mechanism. I tried:
<div>
<style scoped>#import(/css/mystyle.less)</style>
<p>Affected</p>
</div>
<p>Unaffected</p>
how do I do it?
You need to specify type="text/less" attribute for the <style> tag containing LESS code.
Correct syntax for the LESS import statement would be: #import "/css/mystyle.less"; (#import(/css/mystyle.css) is not valid CSS too).
less.js must be included after style tags of interest (e.g. if the <style> is in the <body>, <script src="less.js" ...> goes into the <body> too).
For example:
...
<body>
<span>
<style scoped type="text/less">
#color: red;
div {color: #color}
</style>
<div>
foo!
</div>
</span>
<div>
bar?
</div>
<script src="../less-1.6.0.js" type="text/javascript"></script>
</body>
...
How to give same style to first 2 paragraphs differently in css.
<html>
<head>
<style type="text/css" media="screen">
p+p {color:red}
</style>
</head>
<body>
<p>first paragraph</p>
<p>second paragraph</p>
<p>third paragraph</p>
<p>fourth paragraph</p>
</body>
</html>
I've tried this but it's leaving first paragraph and styling all other.
and this only style first paragraph not others
<html>
<head>
<style type="text/css" media="screen">
p:first-child { color: blue; }
</style>
</head>
<body>
<p>first paragraph</p>
<p>second paragraph</p>
<p>third paragraph</p>
<p>fourth paragraph</p>
</body>
</html>
remember I want to give same style on first 2 paragraph.
Go here, and try this code out :)
http://www.w3schools.com/css/tryit.asp?filename=trycss_first-child1
p:first-child
{
color:blue;
}
p:first-child + p
{
color: red;
}
It depends on what browsers you want to be compatible with. The latest versions of Firefox, Safari, Chrome, and Opera all support the nth-of-type pseudo-element, but IE does not yet (it is a CSS 3 feature, which IE does not support much of). If you can limit yourself to these browsers, the following should work, otherwise, you'll need to use one of the solutions from one of the other answers.
p:nth-of-type(1), p:nth-of-type(2) { color: red }
first of all, ID's need to be unique on a page. You can't use id="hello" twice. You need to use class for that. Try:
<html>
<head>
<style type="text/css" media="screen">
.hello { color: blue; }
</style>
</head>
<body>
<p class="hello">first paragraph</p>
<p class="hello">second paragraph</p>
<p>third paragraph</p>
</body>
</html>