Instead of doing the following to give a text color to all elements on the page:
* {color: red;}
Is there a way to only apply it to all elements within a certain id? Something like this:
#container * {color: red;}
Actually yes, exactly like you mentioned.
#container * { color: red; }
#container * {color: red;}
Should work.
If you only want direct children to get the class, try
#container>*{color: red;}
What browser are you using? (brand + version)
I would have thought:
#container * {color: red;}
Should work.
For your example, can you use jQuery?
$('#container').children().css('color', 'red');
EDIT: I was indeed wrong, serves me right for trying to answer on my lunch break with half a sandwich in my hand -.-
We would be able to provide a much better solution if we were to see the HTML code as a reference.
What you are looking to do is use CSS selectors. (CSS Selectors
And it sounds like Attribute selectors may be an option for you. Attribute Selectors
For example, the following attribute selector matches all H1 elements that specify the "title" attribute, whatever its value:
h1[title] { color: blue; }
In the following example, the selector matches all SPAN elements whose "class" attribute has exactly the value "example":
span[class=example] { color: blue; }
Related
In cases you find text in HTML code that is not embeded in any tags such as:
<sometag> ex1 </sometag>
I know many ways to select the text using a p tag or using a class or an id on the div, etc. but my question is: how do you write a css rule for this code as is? Also, I want the rule to be specific for the text so:
sometag {...}
is not desirable because it is more generic.
Thanks for all in advance.
Simply put, no. There is currently no selector to select TEXT only with CSS. You can (and should) use markup to get the result you're looking for:
HTML:
<sometag>
<span>text here</span>
<img src='..' />
some other stuff i don't want to select in my CSS
</sometag>
CSS:
sometag span{
/* do something here */
}
Text nodes cannot have styles applied to them, so anything you need style applied to must be in an element. If you want some of the text inside of your element to be styled differently, wrap it in a span or div, for example.
The wrapping element can then be selected using CSS based on the element type, ID, class, or document order, but not by content.
You can, however, use jQuery to select by content using the :contains selector: http://api.jquery.com/contains-selector/
If "your tag" is a reserved name, like input, div, etc, you can use this:
e.g
sometag {
border-width: 1px;
}
of course, every tag can receive an id or class, so, you still use for id or class:
id
<sometag id="myid"></sometag>
#myid {
border-width: 1px;
}
class
<sometag class="myclass"></sometag>
.myclass {
border-width: 1px;
}
You can use html:
html {
color: red;
}
or body:
body {
color: red;
}
or select everything with *:
* {
color: red;
}
I thought I had my CSS down fairly well but I cannot seem to figure out why this problem occurs. I must be doing something wrong.
So if I want to select multiple elements that are children to a div I could write:
#mydiv > input, label{
}
Am I correct? I thought this to be true until I realized that other inputs and labels in my site were inheriting these CSS properties even though they were not in the div called #mydiv. To fix the issue I had to use:
#mydiv > input, #mydiv > label {
}
But I am pretty sure that this is not the quickest way to do so. I tried checking the Selector Page on W3.org but they do not give an example for my situation.
What am I doing wrong?
Am I correct?
No. The grouping selector (comma) has the lowest precedence, so you cannot use it to select multiple elements that are children of a div using this selector:
#mydiv > input, label
The most concise selector is the one that you found on your own:
#mydiv > input, #mydiv > label
You can DRY things up a bit using nested rules in LESS or Sass, though that does introduce a dependency in your code and/or build process.
Your second snippet is the simplest way to do it with pure CSS. The comma , separates isolated CSS selectors, so that's why you needed to begin each with #mydiv for both selectors.
You could use something like LESS, which would allow nested rules. Non-germane example:
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
But you're probably better off with pure CSS.
Your second method is good
#mydiv > input, #mydiv > label {
}
If you wanted to somehow do this without using multiple selectors separated by a comma, you could use a class name for both your input and label elements
.your-class-name {
}
or if for some reason input and label were the only two types of child elements for #mydiv, then you could use the universal selector like this:
#mydiv > * {
}
I'm not sure this is possible, but is there a syntax to be used in CSS when you want to style an element based on the combination of classes applied to it?
I understand that I can check an element with jQuery or something and change it's style based on the classes it has, but is there a pure CSS way to do this?
For example, if I have a class for bold and green:
.bold_green { color:green; font-weight:bold; }
And a class for bold and blue:
.bold_blue { color:blue; font-weight:bold. }
Now, say I am using jQuery to add and remove classes dynamically and want any element that has both classes to turn italic pink.
Something like:
.bold_green AND .bold_blue { color:pink; font-style:italic; }
Or, if I want to style an element that has aclass, and is a descendant of another element that has another class?
Something like:
.bold_green HAS_CHILD .bold_blue { color:black; background-color:yellow; }
Thanks!
Edit
Thanks for all the answers. These are pretty much what I thought (just treating the classes as regular selectors), but they don't seem to be working for me. I will have to check my code and make sure they aren't being overridden somehow...
$('.bold_green.bold_blue').addClass('something-else');
Or in CSS:
.bold_green.bold_blue { color: pink; }
Notice there's no space between the selectors.
You don't need anything special, just
.bold_green.bold_blue { color:pink; font-style:italic; }
Paul and Voyager are correct for the multiple classes case.
For the "HAS CHILD" case you would use:
.bold_green .bold_blue { ... } /* note the ' ' (called the descendant selector) */
Which will style any bold_blue elements inside a bold_green element.
Or if you wanted a DIRECT child:
.bold_green > .bold_blue { ... } /* this child selector does not work in IE6 */
Which will style only bold_blue elements which have an immediate parent bold_green.
In visual studio 2013 the CSS setting is applied to multiple classes by a "Comma" as follows:
.bold_green, .bold_blue { color:pink; font-style:italic; }
Hey SO, I am a bit rusty with my CSS, so bear with me :)
I am working with a layout that has a border-bottom property for h2,h3,h4,h5,h6. One of my pages uses h3 to display titles for a FAQ listing, and it has an anchor tag since there is an expand/contract script active (click title, FAQ appears below title). I do not want these particular h3 elements to have the border. Is there a particular CSS syntax that I can use to achieve this? maybe something like:
#content a,h3 {
border-bottom:none;
}
This is obviously wrong since it will just clear any bottom borders for any a/h3 elements that reside in my content container.
thanks!
Clarification:
<h3>Text</h3>
There's no CSS selector that will select elements based on their parent. The best solution is to give the FAQ container an ID or class and then:
#faq h3 {
border-bottom: none;
}
The following is a demonstration of what each css-selector would match to. Note that it is not acceptable by web-standards to place h3's within a's.
a h3 { styles }
<h3>Hello</h3>
h3 a { styles }
<h3>Hello</h3>
Use this instead :
h3>a { text-decoration: none; }
Doing so you target every 'a' childs of 'h3'
Prefer the use of classes and tags selectors versus ids the most you can, as targeting ids tend to make your css code less flexible and extensible. Think inheritance as in OOP.
For further reading and complete coverage of the CSS selectors you can refer to :
http://www.w3.org/TR/2009/CR-CSS2-20090423/selector.html#child-selectors
Cheers
#content a>h3 { border-bottom:none; }
should do it. The > means 'next tag must be'.
#content a h3 { border-bottom:none; }
would probably work too.
You use the comma for multiple rules e.g
h1, h2, h3 {
color: red;
}
For red h1 to h3
I have a css class rule:
.test{ text-align:center; font-family:Verdana; }
And i want to create another id rule (I hope It is right calling by "id rule" ):
#divNew1{ color: Red; }
#spanNew2{ color: Green; }
#pNew3{ color: Yellow; }
I have a lot of div elements. I want to pass .test class properties to other elements with only changing css file. That's why i don't want to add class attribute to div elements. The html code below:
<div id="divNew1">Ta ta taaaaa</div>
<span id="spanNew2">Ta ta taaaaa</span>
<p id="pNew3">Ta ta taaaaa</p>
But i want to add .test class properties to #divNew class by using inheritance and i don't want to add class attribute to the div like as above.
Is there any way to do this?
Just include the ID class on the upper declartion, the last declaration for any property wins. E.g. if the first rule had a color: Green;, .test would be green, #divNew would still be red.
.test, #divNew{ text-align:center; font-family:Verdana; }
#divNew{ color: Red; }
I believe the question is, can my "#divNew" CSS rule inherit the properties of the existing ".test" rule so that:
[Psuedo Code]
.test { color: red; }
#divNew : .test { border: 1px solid Black }
... results in an element with an id of #divNew getting both red text and a black border.
And the answer is no - there is no syntax for declaring the inheritance of one rule by another rule - but you can apply multiple CSS rules to one element.
In this example, the element would take the rules for "#divNew" and ".test" and ".another". It would override any conflicting properties with the last rule in your CSS.
<div id="#divNew" class="test another">...
LESS/dotLess allow you to perform additional processing within a CSS file on the server side, using a CSS style syntax. LESS. I'd link to dotLess, but I can't find a functioning link at present (http://www.dotlesscss.com/ is coming up empty for me)
edit
Or T4CSS from Phil Haack
What do you mean by inheritance? If in your HTML #divNew is a child of .test, then CSS properties of .test are already inherited by it (unless you override them by setting specific #divNew properties).
Syntax for adding properties directly to #divNew which is also .test:
#divNew.test {/*properties*/}
Syntax for adding properties to #divNew which is a child of .test:
.test #divNew {/*properties*/}
<div id="divNew" class="test">Ta ta taaaaa</div>
Not sure to understand you, but:
.test{ text-align:center; font-family:Verdana; }
#divNew.test{ color: Red; }