div.entry-content:not(body.single div.entry-content)
{
font-family: 'Droid Sans', sans-serif;
margin-top:10px;
line-height: 114%;
font-size:15px;
}
the above css doesn't effect any elements at all ....I want div.entry-content elements that exist inside a body with the class single to be styled differently from the rest div.entry-contentelements ..
body.single div.entry-content
{}
and
div.entry-content
{}
do seem to work just fine .. but
div.entry-content:not(body.single div.entry-content)
{}
doesn't seem to
You need to rewrite the selector line to work the way you intend it to:
body:not(.single) div.entry-content {
font-family: 'Droid Sans', sans-serif;
margin-top:10px;
line-height: 114%;
font-size:15px;
}
This CSS Tricks page elaborates on the fact that you may only use a simple selector within a :not pseudo-class, which they define as follows in the footnote:
A simple selector is classified as a Type Selector, Universal Selector, Attribute Selector, Class Selector, ID Selector, or Pseudo Class Selector.
I want div.entry-content elements that exist inside a body with the
class single to be styled differently from the rest
div.entry-content elements
If you really want to use the :not() selector then you need to do something like this:
body:not(.single) div.entry-content {
font-family: 'Droid Sans', sans-serif;
margin-top: 10px;
line-height: 114%;
font-size: 15px;
/* demo*/
background: red
}
<body>
<div class="entry-content">test
</div>
</body>
with class single in body
body:not(.single) div.entry-content {
font-family: 'Droid Sans', sans-serif;
margin-top: 10px;
line-height: 114%;
font-size: 15px;
/* demo*/
background: red
}
<body class="single">
<div class="entry-content">test
</div>
</body>
See more info in MDN about :not
The negation CSS pseudo-class, :not(X), is a functional notation
taking a simple selector X as an argument. It matches an element that
is not represented by the argument. X must not contain another
negation selector.
body:not(.single) div.entry-content {
font-family: 'Droid Sans', sans-serif;
margin-top: 10px;
line-height: 114%;
font-size: 20px;
color:white;
background:green;
}
<div class="single">
this is the single div
<div class="entry-content">
write some text inside entry content
</div>
</div>
Related
I want to apply:
.page-item-124 a {
font-size: 15px !important;
font-weight: bold;
}
to all page items (classes starting with page-item) there are.
How can I do that?
You can use CSS3 [attribute*=value] Selector like this
Demo: https://jsfiddle.net/2Lzo9vfc/180/
HTML
<div class="page-item-1">Lorem ipsum</div>
<div class="page-item-2">Lorem ipsum</div>
CSS
div[class*="page-item"] {
color: blue;
font-size: 15px;
}
You can use the starts with (^=) or wildcard (*=) attribute selector for that:
[class=^page-item] { font-size: 15px !important; font-weight: bold; }
This will select among others these elements:
<p class="page-item-123"></p>
<section class="page-item-intro"></section>
You might want to narrow it down a bit. Eg only select div elements.
div[class^=page-item] { ... }
See also selector documentation and the fiddle demo
I have the following html5 code. I expected the style for the text Business Ads to be italic and color in yellow. But it comes in red.
Can only certain styles be applied to the aside element?
CSS:
aside h4 {
font-style: italic !important;
color: yellow;
}
article h4 {
font-style: normal;
color: red;
}
HTML:
<div>
<article>
<aside>
<h4>Business Ads</h4>
</aside>
</article>
</div>
This is a result of the way CSS specificity works. The page here:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
provides a good explanation. In this case, since both style declarations refer to an h1 within a larger element, they have equal specificity, and the latest declared style takes precedence. You can override this with !important, but it's usually considered bad style because it breaks the "cascading" nature of CSS. Instead, use a more specific selector:
article aside h1 {
//style goes here
}
You override the rules the way you have set your CSS. Both rules target same element, so the second one will override the first one and apply to the element.
For example if you set the oppossite order to your rules like this :
article h4 {
font-style: normal;
color: red;
}
aside h4 {
font-style: italic !important;
color: yellow;
}
the second one will aply and h4 will be yellow an italic
So if you have an h4 also inside article you can use this:
article aside h4 {
font-style: italic !important;
color: yellow;
}
article h4 {
font-style: normal;
color: red;
}
DEMO
You must be more specific with the selector so that the rule it is assigned to overrides the "default" one. You can the remove the !important which isn't the best way to override existing rules when you can use other techniques.
DEMO
article aside h4 {
font-style: italic;
color: yellow;
}
article h4 {
font-style: normal;
color: red;
}
You're targeting the same h4 element but you gave it with different styles
and the last one was read. Just delete
article h4 {
font-style: normal;
color: red;
}
and remove the !important in the first selector.
And if you're targeting different h4 tags inside an article or aside tag, what you can do is put classes or span on them.
i have a main "div" with multiple divs and "a" tags and i wanted to set a "template like" css to make them all look the same, but some of the A tags need to be different so i thought about making it like this:
<div class="main">
CLick A
<br/>
CLick B
<br/>
CLick C
....
</div>
and on the css:
.main a{
/* Links Scheme */
}
.exception{
/* particular link css */
}
But the browser gives preference to my "template" instead of the particular class. shouldn't the class be the most important or am i missing something?
FIDDLE Link
PS: without the use of "!important" tag please
This is an issue of specificity. Since .main a includes a class and a tag name, it is more specific, and thus gets higher precedence than just a class name.
So, to solve it, use .main .exception for your exception.
.main a is more specific then .exception. I think what you are going for is:
.main a{
/* Links Scheme */
}
.main a.exception{
/* particular link css */
}
In css, orders are also determined by how specific the selector is, so try changing .exception to .main a.exception.
jsFiddle: http://jsfiddle.net/jdwire/DFNyW/2/
you can use :not() pseudo-class, The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class. so you can fix code like this:
.main a:not(.exception){
color: #3b5998;
outline-style: none;
text-decoration: none;
font-size: 11px;
font-weight: bold;
text-decoration: none;
}
.exception{
color: #0498ba;
font-family: Verdana, sans-serif;
font-size: 30px;
letter-spacing: 2px;
margin: 0 0 0;
padding: 0;
font-weight: bold;
text-decoration: none;
}
<div class="main">
CLickA
<br/>
CLickB
<br/>
CLickC
</div>
I have a headline:
<h1>THIS IS A HEADLINE</h1>
How do I make the phrase "THIS IS..." not to be bold and the rest without a change?
I couldn't find any relevant tag in text-decoration.
The heading looks bold because of its large size. If you have applied bold or want to change behaviour, you can do:
h1 { font-weight: normal; }
More: 3.2. Font weight: the font-weight property
Try font-weight:normal;
h1 {
font-weight: normal;
}
<h1><span style="font-weight:bold;">THIS IS</span> A HEADLINE</h1>
But be sure that h1 is marked with
font-weight: normal;
You can also set the style with a id or class attribute.
You want font-weight, not text-decoration (along with suitable additional markup, such as <em> or <span>, so you can apply different styling to different parts of the heading)
style is accordingly vis CSS. An example:
<h1 class="mynotsoboldtitle">I'm not bold</h1>
<style>
.mynotsoboldtitle { font-weight: normal; }
</style>
<h1><span>This is</span> a Headline</h1>
h1 { font-weight: normal; text-transform: uppercase; }
h1 span { font-weight: bold; }
I'm not sure if it was just for the sake of showing us, but as a side note, you should always set uppercase text with CSS :)
For "THIS IS" not to be bold, add <span></span> around the text:
<h1>><span>THIS IS</span> A HEADLINE</h1>
And in style
h1 span{font-weight: normal}
You can simply do like that in the HTML part:
<span>Heading Text</span>
And in the CSS, you can make it as an h1 block using display:
span{
display: block;
font-size: 20px;
}
You will get it as a h1 without bold.
If you want it bold, just add this to the CSS:
font-weight: bold;
You can use font-weight:100 or lighter: this is working with i.e. Opera 16 and older, but I do not know why the h1 tags in Firefox are bolder, sorry.
If you want to remove the bold, you can use the code below,
h1 {
font-weight: normal;
}
But for "THIS IS" not to be bold, add <span></span> around the text,
<h1><span>THIS IS</span> A HEADLINE</h1>
And in style,
h1 span {
font-weight: normal;
}
Code example result,
h1 span {
font-weight: normal;
}
<h1><span>THIS IS</span> A HEADLINE</h1>
.pitch h1
{
FONT-FAMILY: "HelveticaNeue-Bold", "HelveticaNeue", Helvetica, Arial, Sans-serif; MARGIN-BOTTOM: 40px; LETTER-SPACING: -0.03em; FONT-SIZE: 60px; FONT-WEIGHT: bold; WORD-SPACING: -0.04em; color:#FFFFFF;
LETTER-SPACING: -0.05em;
}
the html:
<h1 class="pitch">
Best way to increase client's<br>
confidence and boost your sales</h1>
what is wrong here?
why is this class not applied? Insteed of applying class .pitch , it applies the frmat of the body text to the text inside h1
.pitch h1 means "find an element of type h1 that is a child of an element with class 'pitch'".
What you want is h1.pitch.
The h1 isn't in some other element with the class pitch, which is what your CSS is trying to apply the rule to. Instead, the h1 has that class.
If you want to select the h1 with the class, use h1.pitch.
Just do the attributes for h1 that belongs to .pitch class like -
.pitch h1{ ... }
<div class="pitch">
<h1> </h1>
</div>
Instead of .pitch h1 { ... }, i think it should just be .pitch.