HTML code:
<html class="mobile portrait">
<body>
<div>
<header>
<img class="company_logo">
</header>
<section>
<div>
<img class="company_logo">
</div>
</section>
<footer>
<img class="company_logo">
</footer>
</div>
</body>
</html>
In order to display: none;, How can I apply one rule to .company_logo while .mobile .portrait?:
Update: Edited HTML code to add multiple company_logo. Code deleted from the question:
/* CSS code */
.mobile .portrait > body > div > header > .company_logo {
display: none;
}
/* Matches elements with the class of company_logo
that are inside an element
with both "mobile" and "portrait" classes */
.mobile.portrait .company_logo {
/* style here */
}
Related
I have a specific h1 header I'd like to target with css but not sure how.
Html
</div>
</header><!-- #masthead -->
<div id="content" class="main-container">
<div class="header-callout"></div>
<section class="content-area pt0 ">
<div id="main" class="container" role="main">
<div class="row">
<div id="primary" class="col-md-8 mb-xs-24 sidebar.
right">
<article id="post-9949" class="post-9949 page type-page
status-publish hentry"><header class="entry-header">
<h1 class="entry-title">Showcase of the Month</h1>
</header><!-- .entry-header -->
View here
Basically I'd like to centre it. But margin: auto never works.
You can use:
.entry-title {
/* Your CSS */
}
or
h1.entry-title {
/* Your CSS */
}
If this is not working, are there other CSS rules that may apply here (like a separate h1 tag style?) You can make it more specific like this:
header > h1.entry-title {
/* Your CSS */
}
Here, the > means h1 tags that are immediate children of a header tag and have class entry-title.
If you only want to target this specific h1 tag, give it an ID:
<h1 class="entry-title" id="my-title">Text</h1>
IDs can be targeted using #:
#my-title {
/* Your CSS */
}
or
h1#my-title {
/* Your CSS */
}
You can even ensure you select only those that have a certain class and a certain ID with this:
h1#my-title.entry-title {
/* Your CSS */
}
I'm using a CSS layout on both html page.
I want to use the same style except I want to hide/disable other classes made for it for the second html page and still use the others on the first html page.
Situation:
class="firstClass" has the fonts and style I wanted with it but has other classes and styles that shows when I use that class.
I tried getting the other classes by adding a secondClass on the same level of the first class, then did this:
.firstClass .secondClass, .dontWant1 .dontWant2 {
display:none;
}
Problem is it also hides on the first html.
You can have multiple classes on one element. That said, you add classes on one page that you dont add on the other page, to show elements on page 1 and hide them on page 2.
You can have that one class show or dontshow to define what elements are visible.
Then you add a class to define your styles.
HTML/CSS:
.greenbox {
background-color: green;
width: 100px;
height: 100px;
}
.redbox {
background-color: red;
width: 20px;
height: 20px;
}
.show {
display: block;
}
.dontshow {
display: none;
}
<div class="greenbox">
<div class="show">
<div class="redbox">
<!-- red box visible -->
</div>
</div>
<div class="dontshow">
<div class="redbox">
<!-- red box not visible -->
</div>
</div>
<div class="dontshow redbox">
<!-- red box not visible -->
<!-- exactly the same outcome as the above without the wrapping div -->
</div>
</div>
You can try this:
html:
<div class="main">
content goes here.
</div>
<div class="main active">
content goes here.
</div>
css:
.main {
background-color:yellow;
display:none;
}
.active {
display:block; OR display:block !important;
}
I need to hide all but the first one h3 in a list of containers. They only contain classes.
<div class="preview">
--content
</div>
<div class="preview evaluation">
<h3>Heading</h3> <!-- should stay -->
</div>
<div class="preview evaluation">
<h3>Heading</h3> <!-- should hide -->
</div>
<div class="preview evaluation">
<h3>Heading</h3> <!-- should hide -->
</div>
I need to do this only with css.
If it's always going to have the structure in your example:
.evaluation + .evaluation h3 {display:none}
Updated answer according to the edited question...
If you want to hide only the <h3> elements, then:
.evaluation>h3 { display: none; }
.evaluation:nth-of-type(2)>h3 { display: block; }
If you want to hide the <div> elements containing <h3> elements, then:
.evaluation { display: none; }
.evaluation:nth-of-type(2) { display: block; }
Alternatively you can do...
.evaluation:not(:nth-of-type(2))>h3 { display: none; }
or...
.evaluation:not(:nth-of-type(2)) { display: none; }
how to open div tag on hover a tag
Service is id of a tag
Services is id of div tag
My Html Code is
<ul><li>Services</li></ul>
<div id="Services">
<h1>Hello</h1>
</div>
and my css code is this
#Services
{
display: none;
}
#Service:hover + #Services
{
display: block;
}
#Services isn't a sibling of #Service, so the + selector won't match it.
Check this fiddle for modified markup which makes the two siblings. You will need to style it accordingly.
<ul><li>Services
<div id="Services">
<h1>Hello</h1>
</div></li></ul>
Add the #services as the siblings element of the #service. Then the code would work.
Such as this:
<div>
Hyperlink
<div id="services">Some text</div>
</div> <!-- or any other of the container element -->
Let say I got this page:
<body>
<h1>Hello!</h1>
<div class="wrapper">
<div class="anotherclass">
<h1>Another heading 1</h1>
</div>
<div class="yetanotherclass">
<h1>Yet another heading 1</h1>
</div>
</div>
<h1>Good bye!</h1>
<div class="class">
<h1>Good bye. And this time I mean it.</h1>
</div>
</body>
And I want to select all H1 elements that are NOT within the wrapper-class. How can I do that with CSS?
I don't want a "solution" like
body h1, body .class h1 {style definitions}
I'm more after some kind of this:
h1:not(.wrapper > h1) {style definitions}
Is there any way to do this?
What if you did something like this:
h1 { /* rules for everything without the class */ }
h1.class { /* rules for everything with the class */ }
In h1.class you would override everything that you defined in your h1 rule.
Here is an example:
<html>
<head>
<style type="text/css">
div { color:#00f; }
div.foo { color:#f00; }
</style>
</head>
<body>
<div class="foo">foo</div>
<div>bar</div>
<div>baz</div>
</body>
</html>
In this example I have effectively targeted all divs that do not have a class of foo.
You can't do what you're asking with css. The whole idea around css is the cascade, and what you're wanting to do is work against the flow of the cascade.
Work with the tide do regular css:
h1 {style definitions}
.wrapper h1 {style definitions}
You can use the universal selector * to apply global styling and then apply a nested universal selector: .wrapper * to undo the styling you applied originally
* {font-weight:bold; border:thin solid red;}
.wrapper * {font-weight:normal; border: 0px solid white;}