I have this HTML
<html>
<head>
<style>
.text-box {
color: red;
}
</style>
</head>
<body>
<p class="text-box">Hello</p>
<div style="font-weight: bold;">
<p class="text-box">Hello</p>
</div>
<div style="color: blue;">
<p class="text-box">Hello</p>
</div>
</body>
</html>
that produces
The second paragraph works as expected because the paragraph element does not have a font-weight style to be overridden.
Is there a way to override the CSS priority order so the class on the third paragraph is overwritten by the style defined in the container div so that the text is blue?
you're actually asking if you can override a CSS rule.
obviously the answer is NO.
CSS thinks in a correct way in my opinion, i.e. you can set rules on containers, but at the same time you can set them on children.
the priority states that the rules on children win over fathers, so if you don't need the CSS rule on the child, why set it?
Your goal with this code:
<html>
<head>
<style>
.text-box {
color: red;
}
</style>
</head>
<body>
<p class="text-box">Hello</p>
<div style="font-weight: bold;">
<p class="text-box">Hello</p>
</div>
<div style="color: blue;">
<p >Hello</p>
</div>
</body>
</html>
You can give class to parent div and target the 3rd paragraph to give the color blue
<html>
<head>
<style>
.text-box {
color: red;
}
.text-boxDiv .text-box{
color: blue;
}
</style>
</head>
<body>
<p class="text-box">Hello</p>
<div style="font-weight: bold;">
<p class="text-box">Hello</p>
</div>
<div class="text-boxDiv">
<p class="text-box">Hello</p>
</div>
</body>
</html>
<div>
<p class="text-box" style="color:blue;">Hello</p>
</div>
You will have to directly give the color property to the p tag inside your div tag
Or you could add a class to the div and do something like this:-
/* CSS */
.myDiv > p {
color: blue;
}
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");
});
my left sidebar has no structure and I want it to be like a menu with a background color. I also have no idea how to make the changes in CSS so I can change the width and height...etc
here is the code for the sidebar
<div class="sidebar">
<nav>
<h1>Menu</h1>
<ul>
<li><strong>Home</strong></li>
<li><strong>Workshop </strong></li>
<li><strong>Team </strong></li>
<li><strong>Resources </strong></li>
<li><strong>Publication </strong></li>
<li><strong>Opportunities </strong></li>
</div><!-- /sidebar -->
CSS syntax can be called for in three ways.
Internal CSS: <style> tags, which must be underneath a <head> element that precede your <body>.
External CSS: Linking external CSS with just the CSS syntax, void of any HTML tags. You connect the two documents with a <link> tag using the href attribute
Block-level/Inline elements: CSS can be placed inside of block-level elements and inline elements (a list of which appear here)
Here is how to color your sidebar's background using the first method:
<head>
<style>
.sidebar {
background-color: gray;
}
</style>
</head>
And here's one way to add containers/boxes around your sidebar using the first method:
<head>
<style>
.box {
background-color: #eee;
margin-top: 5px;
padding: 10px;
text-align: center;
}
.sidebar {
display: block;
width: 150px;
font-family: Arial, sans-serif;
}
.row:after {
clear: both;
content: "";
display: table;
}
</style>
</head>
<body>
<div class="row">
<div class="sidebar">
<div class="box">
<strong>Home</strong>
</div>
<div class="box">
<strong>Workshop</strong>
</div>
<div class="box">
<strong>Team</strong>
</div>
<div class="box">
<strong>Resources </strong>
</div>
<div class="box">
<strong>Publication</strong>
</div>
<div class="box">
<strong>Opportunities</strong>
</div>
</div>
</div>
</body>
I'm not sure if this is exactly what you're looking for, but you can change the font, margins, and padding underneath the <style> tag however you want.
Also, I would suggest going through w3school's CSS introduction just to familiarize yourself with how it all works. Another tip: Make sure all of your starting tags have the necessary end tags! For example, in the code you wrote a closing </ul> and </nav> are missing.
Contained within a parent element (e.g., div, ul), I would like to set the color of a single paragraph, then have all subsequent paragraphs receive the same color -- until a new class of paragraph comes along to change the color. I tried to implement selectors to get the job done, but the mixed results only ended up confusing me. Suggestions would be appreciated. Thank you.
<html>
<head>
<style>
p.r { color: red; }
p.g { color: green; }
</style>
</head>
<body>
<p class="r">RED
<p class="g">GREEN
<p class="r">RED
<p>red
<p class="g">GREEN
<p>green
<p class="r">RED
<p>red
<p>red
<p class="g">GREEN
<p>green
<p>green
</body>
</html>
Set the style on the parent class ie.
HTML
<div class="parentdiv">
<p>this will appear blue</p>
<p>this will also appear blue</p>
<p class="green">this will appear green</p>
</div>
CSS
.parentdiv p {
color: blue;
}
.parentdiv .green {
color: green;
}
It's not a very scalable solution, but one option is to repeat the adjacent sibling combinator and p:not([class]) for as many consecutive <class> + <classless> elements there are in a row:
p.r,
p.r+p:not([class]),
p.r+p:not([class])+p:not([class])
{
color: red;
}
p.g,
p.g+p:not([class]),
p.g+p:not([class])+p:not([class])
{
color: green;
}
<p class="r">RED</p>
<p class="g">GREEN</p>
<p class="r">RED</p>
<p>red</p>
<p class="g">GREEN</p>
<p>green</p>
<p class="r">RED</p>
<p>red</p>
<p>red</p>
<p class="g">GREEN</p>
<p>green</p>
<p>green</p>
I'm trying to apply styles to the last <p> in a div. I'd like to do so without adding a new class (or ID).
I've tried using the last-child selector but it's not working.
I have even tried declaring p:last-child {font-style: italic;} for all of my CSS document and this doesn't seem to have any effect.
Here's my HTML:
<div class="new-section">
<div class="collection-container">
<div class="container">
<div class="row">
<div class="title span16">
<h1>The Title</h1>
</div>
<div class="span8">
<p>Some text.</p>
<p>This collection includes video, audio and essays.</p>
<p>Visit now</p>
<div class="arrow-right"></div>
</div>
</div>
</div>
</div>
</div>
And here's my LESS CSS:
.collection-container {
height: 200px;
position: relative;
background-color: #gray;
.container {
padding-top: #r-margin;
.title {
margin-bottom: #xs-margin;
}
.span8 p:last-child {
font-style: italic;
}
}
}
It seems like this would be an appropriate place to use :last-of-type, to select the last p in its parent element:
.span8 p:last-of-type {
font-style: italic;
}
Demonstration
Here's a working example after I have removed the redundant code to show you how it works http://jsfiddle.net/RDpcM/1/
It's always a good idea to format your code and try to break out the bits that matter when trying to debug. It's very easy to get a closing bracket wrong and it all goes pear shaped.
<div class="span8">
<p>Some text.</p>
<p>This collection includes video, audio and essays.</p>
<p>Visit now</p>
</div>
div p:last-child {
font-style: italic;
border:solid 1px blue;
}
[EDIT - using JQuery]
If you have other elements in div.span8 and don't know the number of elements up front you can introduce some jquery to achieve the desired affect.
Here's another fiddle: http://jsfiddle.net/VPbv2/
or this will work as a standalone example for you to try out. JQuery dynamically sets the mySelected class when the document loads.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
.mySelected {
font-style: italic;
border:solid 1px blue;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("div.span8 > p:last").addClass("mySelected");
});
</script>
</head>
<body>
<div class="span8">
<p>Some text.</p>
<p>This collection includes video, audio and essays.</p>
<p>Visit now</p>
<div>xxx</div>
</div>
</body>
</html>
[EDIT - non JQuery]
You pointed out that the original answer will not work when you have this code
<div class="span8">
<p>Some text.</p>
<p>This collection includes video, audio and essays.</p>
<p>Visit now</p>
<div> another non-P tag that will mess up the p:last-child selector</div>
</div>
So you have to make sure you don't have any other siblings for your <p> tags by wrapping them in an extra div like this
<div class="span8">
<div class="only-for-p">
<p>Some text.</p>
<p>This collection includes video, audio and essays.</p>
<p>Visit now</p>
</div>
<div> this non-P tag no longer messes with the p:last-child selector</div>
</div>
I think your syntax is wrong. Should be...
.span8 p:last-child {font-style: italic;}
You are missing the period..
Also if you aren't concerned about using CSS3 you could do...
.span8 p:nth-child(3) { }
This is useful for getting those middle elements.
In your case, you need to use either p:last or p:last-of-type selector, because last child of div.span8 is div.arrow-right and not p
div.span8 p:last-child { font-style:italic; }
your css is not working as p tag is not the last child of span8.
if you change
.span8 p:last-child {font-style: italic;}
to
.span8 p:nth-last-child(2) {font-style: italic;} it will work
Below is the code in which I tried using text-decoration:none. However, text is always underlined.
<html>
<head>
<style type="text/css">
.search, .search_b1, .search_b2{
display: block;
color: #000;
text-decoration: none;
}
.search_b1:hover {
color: red;
}
</style>
</head>
<body>
<div id="left">
<a href = "#">
<span class="search">
<span class="search_b1">Text text</span>
<span class="search_b2">Text text</span>
</span>
</a>
</div>
</body>
</html>
You set the span element to a block element.
Block elements can not have text-decoration. Only inline elements can.
You need to apply the text-decoration to the anchor elements.