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>
Related
I was just wondering how to view p.intro::first-letter in the following code. Does this mean that only in a p element can the intro class be used?
<!DOCTYPE html>
<html>
<head>
<style>
p.intro::first-letter {
color: #ff0000;
font-size: 200%;
}
</style>
</head>
<body>
<p class="intro">This is an introduction.</p>
<p>This is a paragraph with some text. A bit more text even.</p>
</body>
</html>
Yes
The selector p.intro::first-letter means "Style the ::first-letter of a <p> element with the class intro.
When there is no space between the selectors p, .intro, ::first-letter (these are called selectors) it is like an "AND" statement
div.RedText means div element AND RedText class
It's worth reading up on the different types of selectors, W3Schools has a really good interactive example too!
Here's a little more:
<!DOCTYPE html>
<html>
<head>
<style>
p.intro::first-letter {
color: #ff0000;
font-size: 200%;
}
div {
color: #0000ff;
}
div.RedText {
color: #ff0000;
}
</style>
</head>
<body>
<p class="intro">This is an introduction.</p>
<p>This is a paragraph with some text. A bit more text even.</p>
<div>This text is blue</div>
<div class="RedText">This text is red!</div>
</body>
</html>
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>
#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'.
<!DOCTYPE html>
<html>
<head>
<title>my web page</title>
<meta name="author" content="akhil">
<style>
h1{color: red;font-size: 400%}
p{color: red}
</style>
</head>
<body>
<section>
<h1>hello how are you?</h1>
<p>i am fine.<hr> what about you?</p>
</section>
</body>
</html>
In this document style is applying to h1 and p but it is not applying to line after hr tag, how to make style apply to line after hr tag?
A paragraph cannot contain a <hr /> tag, so all text after <hr /> will be out of <p> tag. It's better to use this way:
h1 {
color: red;
font-size: 400%;
}
p {
color: red;
}
<section>
<h1>hello how are you?</h1>
<p>i am fine.</p>
<hr />
<p>what about you?</p>
</section>
This is how the browsers render your code:
Your content isn't inside the <p /> tag anymore.
you can close and open the paragraf:
<p>i am fine.</p> <hr><p> what about you?</p>
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!